经过一些血汗和幸运的是没有眼泪,我成功地创建了一个符合我需要的拖放系统。
只有两件事让我泪流满面……
这是 jsfiddle
问题出在这几行代码中,但找不到:
if (dropped === original) {
$("#dropzone").append('<li class="placeholder" data-id="" data-order="" data-content=""></li>');
init();
}
$(".remove").click(function() {
var removable = $(this).parent();
if (dropped > original) {
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
init();
});
现在解释和我的目标:
有 5 天,默认情况下,占位符会随着天数动态增加。如果占位符的最大限制已满,将附加另一个。现在,在附加非默认占位符并删除之前填充的占位符后,我不能让它再次可放置。
不好解释,但是看上面的demo ^
Extra:我希望能够在这些占位符之间拖动项目。但是也找不到办法。
感谢您的帮助!
最佳答案
您似乎没有在删除时重新激活 droppable
。而且,在 drop
上 destroy
它们可能会让您需要重新创建它们。您可以在删除时使用 disable
,在删除时使用 enable
。像这样:
drop: function (event, ui) {
var dragging = ui.draggable.clone().find("img").remove();
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
之后:
if (dropped > original) {
$(this).parent().droppable('enable')
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
$(this).parent().droppable('enable');
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
关于javascript - jQuery 可在动态创建的元素上拖动/排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30938184/