我有一个 html 页面,其中包含一些可拖动的图像和一组可放置的 div。使用下面的代码一切正常,但我不知道如何在删除项目后从可删除区域中删除该项目。 (假设用户改变了主意......)
我想要一些行为,如果您将一个项目拖出可放置区域,它就会从可放置区域中删除。我预计这是开箱即用的行为,但显然不是。
$(".draggable").draggable({ cursor: "move", revert: "invalid", helper: "clone" });
$(".droppable").droppable({
hoverClass: "ui-state-active",
drop: function (ev, ui) {
$(this).append($(ui.draggable).clone());
}
});
是否有无论如何支持这种行为,以便我可以从可放置的项目中删除项目(我是否也需要将其设为可拖动?对于我认为这样一个简单而基本的功能来说,这似乎很奇怪且矫枉过正......
最佳答案
我会使用 droppable 的 out event至 remove可拖动对象如下所示:
<强> Working Example
$(".draggable").draggable({
cursor: "move",
revert: "invalid",
helper: "clone"
});
$(".droppable").droppable({
accept: '.draggable',
hoverClass: "ui-state-active",
drop: function (ev, ui) {
if ($(ui.draggable).hasClass('new')) {
$('.new').draggable({
revert: true
});
} else {
$(this).append($(ui.draggable).clone().draggable({
helper: "original"
}).addClass('new'));
}
},
out: function (event, ui) {
$(ui.draggable).fadeOut(1000, function () {
$(this).remove();
});
}
});
关于jquery - 使用 jquery-ui droppable 时,如何在已放置项目后将其从可放置区域中删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20025169/