JQuery - droppable 函数仅适用于包含选择器的最后一个元素

Question

我在使用属性 contains 选择器和 droppable fundtion 时遇到问题。 我正在搜索 id 包含字符串“dropAble”的 div 元素

$('div[id*="dragAble"]').draggable();
$('div[id*="dropAble"]').droppable( 
    {
        drop: handleDropEvent
    } 
);

我希望每个元素都对 drop 事件做出反应。我必须这样做，因为我使用的是 JSF，并且因为它替换了我的 div 的初始 id，所以我必须搜索这个子字符串。

drop 事件声明如下：

function handleDropEvent( event, ui ) {
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    alert( this );
}

首先，并不是所有这些元素都会对 drop 事件做出反应，只有前两个。此外，“this”始终是最后一个元素，因此它似乎覆盖了其他定义。

dropelement 的 html 部分如下所示：

<t:dataList value="#{bean.list}" var="elem">
<t:htmlTag value="li" styleClass="folder">
<t:div id="dropAble">
    ...
<:/div>
<t:htmlTag>

拖动元素的html部分如下所示：

<t:dataTable ...>
<t:column ...>
<h:outputText value="#{dok.text}&nbsp;" escape="false"  />
<t:div forceId="true" id="dragAble">
    Drag
</t:div>
</t:column>
</t:dataTable>

我希望能够确定移动了哪个拖动对象（工作正常）并确定拖动项目的放置位置（这似乎总是最后一个元素）。 由于 init 函数中的 draggable() 调用有效，我不明白为什么它不使用 droppable 函数。

还有其他方法可以做到这一点吗？我做错了什么？

感谢您的任何建议！

Answer 1

看这里：http://jqueryui.com/demos/droppable/ 和这里http://jqueryui.com/demos/draggable/ 您在 drop 处理程序中做的一切都是正确的。来自drop handler 上的 jQuery UI 文档：

当接受的可拖动对象被“over”放置时触发此事件 （在公差范围内）这个droppable。在回调中，$(this) 表示可拖放的可拖放对象。 ui.draggable 表示可拖动。