Question

我在使用属性包含选择器和droppable fundtion时遇到了麻烦。我正在搜索id为div的div元素，其中包含字符串“dropAble”

$('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>

drag元素的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函数。

还有其他办法吗？我做错了什么？

任何建议的Thx！

Answer 1

点击此处：http://jqueryui.com/demos/droppable/和http://jqueryui.com/demos/draggable/ 你在drop处理程序中做了一切。来自drop处理程序的jQuery UI文档：

当接受的可拖动信息被“删除”时触发此事件（在容差范围内）这个可放置的。在回调中，$(this) 表示可拖动的droppable被丢弃。 ui.draggable 代表可拖动的。

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

1 个答案: