0

我在使用属性 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 函数。

还有另一种方法可以做到这一点吗？我究竟做错了什么？

谢谢任何建议！

4

1 回答 1

0

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

当接受的可拖动对象被“超过”（在其容差范围内）放置时，将触发此事件。在回调中，$(this) 表示可拖放的可拖放对象。ui.draggable 代表可拖动的。

于 2012-09-13T12:03:11.833 回答