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

Question

我在使用属性contains选择器和可丢弃的基础时遇到问题。我正在搜索id包含字符串"dropAble"的div元素

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

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

drop Event声明如下：

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

首先，并不是所有这些元素都对掉落事件做出反应，只有前两个元素。"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（）调用是有效的，我不明白为什么它不使用可丢弃函数。

有别的办法吗？我做错了什么？

谢谢你的建议！

Answer 1

查看此处：http://jqueryui.com/demos/droppable/在这里http://jqueryui.com/demos/draggable/您在drop处理程序中做得很好。来自drop处理程序上的jQuery UI文档：

当已接受的可拖动对象被"覆盖"时，会触发此事件（在公差范围内）这个可滴管。在回调中，$(this)表示可拖动对象所在的可丢弃对象。ui.draggable表示可拖动。