我使用 jQuery 创建了拖放功能。掉线后我遇到了一个问题。
问题:当我从可放置容器中移除放置的元素(拖动 1)时。它会回到可拖动的容器。同样的元素(拖动 1)我无法放到可放置的容器中。
我该如何解决这个问题?请帮助我。
我的代码
HTML:
<div class="drag-item">
<div class="cs-drop">drag 1 <a href="#"> remove</a>
</div>
<div class="cs-drop">drag 2 <a href="#"> remove</a></div>
<div class="cs-drop">drag 3 <a href="#"> remove</a></div>
</div>
<div style="clear: both;"></div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
JS:
<script>
$('.cs-drop').draggable({
revert: true
});
drop();
function drop() {
$('.drop-container').droppable({
hoverClass: 'active',
drop: function (e, ui) {
$(this).append(ui.draggable);
// $(this).droppable('destroy');
}
});
}
$(".drop-container").on("click", ".cs-drop a", function () {
$(this).closest('.cs-drop').fadeOut(200, function () {
$('.drag-item').prepend($(this).clone().css('display','block'));
$(this).remove();
});
});
</script>
CSS:
<style type ="text/css">
.cs-drop {
padding: 40px 25px;
border: 1px solid red;
float: left;
}
.drop-container {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.drop-container.active {
background-color: red;
}
</style>
最佳答案
因为你正在追加一个被拖放元素的克隆,而 draggable 没有被初始化
$(".drop-container").on("click", ".cs-drop a", function () {
$(this).closest('.cs-drop').fadeOut(200, function () {
$('.drag-item').prepend($(this).css('display', 'block'));
});
});
演示:Fiddle
另一种选择是在克隆的 elemnet 上重新初始化小部件
draggable('.cs-drop');
drop();
function draggable(els) {
$(els).draggable({
revert: true
});
}
function drop() {
$('.drop-container').droppable({
hoverClass: 'active',
drop: function (e, ui) {
$(this).append(ui.draggable);
//$(this).droppable('destroy');
}
});
}
$(".drop-container").on("click", ".cs-drop a", function () {
$(this).closest('.cs-drop').fadeOut(200, function () {
var $el = $(this).clone().show().prependTo('.drag-item');
draggable($el)
});
});
演示:Fiddle
关于jQuery 拖放 - 删除的元素不能再次删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29159677/