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

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

我希望每个元素都能对丢弃事件做出反应。我必须这样做，因为我使用的是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 );
}

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

<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>

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

dropelement的html部分如下所示：

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

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

<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>

...

drag元素的html部分如下所示：

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

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

<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（）调用有效，我不明白为什么它不使用dropable函数

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

谢谢你的建议

看这里：还有这里 您在

拖放处理程序中做的一切都是正确的。从
drop
handler上的jQuery UI文档：

当一个已接受的可拖动文件被丢弃“over”时，会触发此事件
（在公差范围内）该可升降装置。在回调中，
$（this）
表示可拖放对象的可拖放对象<代码>ui.draggable

表示可拖动的

---

改用类<然后在js中：

$（“.draggable”）.draggable（）$（“.droppable”）.droppable（）

。如果使用类，如何确定将哪个元素拖到哪个元素，以及将它拖到哪个元素？他们看起来不一样吗？我接受这个答案。实际上没有什么问题，除了我的dragable div的宽度。我认为这取决于coursor的位置，Dragn drop事件是在哪里触发的。但这实际上取决于元素本身的位置。谢谢你的建议