可放置区域中的jQuery可放置区域
我有一个名为<ul class="droppable">的可拖曳的无序列表。 在无序列表中，我动态生成了名为<li class="placeholder"></li>列表项，这些列表项也可以放置。
在占位符之间放置可拖动项目时，一切正常。 但是当在<li class="placeholder"></li>本身放置一个可拖动的项目时，可拖动的项目会被附加到占位符和无序列表中。
所以我得到了它的双倍克隆。
这里有一个jsfiddle有一个可视化的例子。 我知道在我的页面上获得双倍克隆是合乎逻辑的，但我不知道如何禁用它......
任何帮助是极大的赞赏！
更新：如果将可拖动的项目verticaly拖动到可放置元素上，它们会自动附加？ 这怎么可能？
你可以尝试解决这个问题的一种方法是将你的所有行为移动到你的sortable并使用droppable只是为了确定你需要的行为。 这样，你可以在一个地方处理所有的事情，这应该解决一些对同一元素都可sortable和droppable的不良影响。 喜欢这个：
在你投掷的设置在交换机over ，并out ，并设置您需要的对象。
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
over: function (e, ui) {
curDrag = ui.draggable;
curTarget = e.target;
curThis = $(this);
overSortable = true;
},
out: function (e, ui) {
overSortable = false;
},
drop: function (event, ui) {
}
});
然后，在sortable beforeStop事件中，检查变量overSortable是否为true并在其中设置行为。 所有涉及到ui.draggable，this和event.target的内容都需要替换为您在droppable中设置的对象。 事件更好的方法是创建一个处理所有这些行为的函数，并将它们作为参数传递。
beforeStop: function (e, ui) {
if (overSortable) {
curDrag.addClass('placeholder');
var dragging = curDrag.find("img").remove();
curThis.append(dragging).addClass("dropped");
curThis.droppable('disable');
var day = curDrag.attr('data-id');
var index = $(curTarget).index();
//...
} else {
ui.item.addClass('placeholder')
}
还有一些调整需要完成，目前还不完全清楚究竟应该发生什么以及何时发生，但是这可以使工作更容易，而不是试图管理在放下元素时触发的多个事件，而只是管理一个元素。
http://jsfiddle.net/ts290vth/4/
管理得到它为你工作：
function dropping () {
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
var dragging = ui.draggable.find("img");
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
var day = $(ui.draggable).attr('data-id');
var index = $(event.target).index();
$(this).attr("data-id", day);
$(this).attr("date-order", index);
$(this).addClass("drop-"+ index);
$(this).attr("data-content", "");
注意： var dragging = ui.draggable.find("img"); 这一行让你在拖放时复制副本，所以你只需要删除clone(); 。
它会在dest中创建您拖动项目的克隆。
现在注意这一点：
$("#dropzone").droppable({
accept: "li.to-drag",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
$(this).append(dragging);
//$("li.to-drag").addClass("placeholder");
$(this).droppable('disable');
}
});
}
与占位符类的东西造成你的麻烦。
希望这可以帮助。
链接地址: http://www.djcxy.com/p/27095.html