jquery 选择一个我释放拖放点击的 div

Question

我的HTML是这样的

<div name="draggable">
<div>element1</div>
<div>element2</div>
...
</div>

<div id="dragDrop_target-1"></div>
<div id="dragDrop_target-2"></div>
...

我用

.mouseup

通过在 jQuery 中编码触发一个事件

jQuery( this ).find("[id^=dragDrop_target-]").mouseup(function() {...} );

它运行良好，但选择器找到了我的元素所在的目标框，而不是元素所在的目标框。我逻辑上尝试了

.mousedown

但没有成功。

选择我已将元素放入其中的 div 的正确方法是什么（/或/我在上面释放点击的位置）？

Answer 1

由于您有多个放置目标并遵循@freedomn-m 的建议使用

drop

事件，因此我建议使用以下通用代码，该代码也使用委托事件处理程序。

https://api.jquery.com/on/#on-events-selector-data-handler

使用委托事件处理程序允许您为多个放置目标使用一个公共事件处理程序，并且您可以动态地向 DOM 添加和删除放置目标，而无需添加或删除事件处理程序。

在一般情况下，您的目标放置元素可能有最终为

event.target

的子元素，因此，我们使用

$(event.target).closest()

来找到所需类的父元素。 https://api.jquery.com/closest/#closest-selector

$("#SomeCommonParentElement").on({
    drop: function (event) {
        var $yourDiv = $(event.target).closest(".dropzone");
        // do something with $yourDiv (a jQuery object)
    }
}, ".dropzone");

当然，您必须将建议的类

dropzone

添加到所有应作为拖放区的元素，并选择所有拖放区的一个公共父元素（此处为 id 为

SomeCommonParentElement

的元素）作为事件监听器的持有者，像这样：

<div id="SomeCommonParentElement">
  <div id="dragDrop_target-1" class="dropzone"></div>
  <div id="dragDrop_target-2" class="dropzone"></div>
</div>