我正在研究this demo。我正在研究如何仅使用带有接受选项的一次调用.droppable()
来通过拖放具有特定ID的可拖动元素来接受它们。因此:
dropboxt0接受dragboxt0dropboxt1接受dragboxt1dropboxt2接受dragboxt2dropboxt3接受dragboxt3dropboxt4接受dragboxt4
我使用了以下代码
$(".dragbox").draggable();
$(".dropbox").droppable({
accept: $(this).attr('id'),
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.html("Dropped!");
}
});
但它没有完成任务。
此问题已在此处讨论:jquery droppable accept
您可以使用必须返回true或false的函数,而不是使用单个选择器来接受。在函数内部,有很多方法可以实现所需的行为。我选择以下内容:
<div id="container">
<div class="dropbox" data-drop-id="db01"></div>
<div class="dropbox" data-drop-id="db02"></div>
<div class="dropbox" data-drop-id="db03"></div>
<div class="dropbox" data-drop-id="db04"></div>
<div class="dragbox" data-drag-id="db01"></div>
<div class="dragbox" data-drag-id="db02"></div>
<div class="dragbox" data-drag-id="db03"></div>
<div class="dragbox" data-drag-id="db04"></div>
</div>
带有accept-函数的js,返回true或false:
$(".dropbox").droppable({
accept: function (myDragBox) {
var id_group_drop, id_group_drag;
//get the "id_group" stored in a data-attribute of the draggable
id_group_drag = $(myDragBox).attr("data-drag-id");
//get the "id_group" stored in a data-attribute of the droppable
id_group_drop = $(this).attr("data-drop-id");
//compare the id_groups, return true if they match or false otherwise
return id_group_drop == id_group_drag;
},
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.html("Dropped!");
}
});
对于我的比较而言,重要的是drop和dragbox的ID相同。因此,我没有使用id属性,而是使用了自己的data-id属性,因为我希望自己的ID是唯一的...
请参见此处的演示:http://jsfiddle.net/u9w63y2q/1/