Jquery UI 可丢弃还原无法再次删除

Question

我一直在尝试为单词学习应用程序创建一个拖放系统，但在我恢复并尝试再次拖动它们后，遇到了可拖动元素无法重用的问题。

为了还原可拖动对象，我使用了 out 方法，以便当您将其拖出可放置区域时，它将恢复到其先前的位置。 我通过删除可拖动实例并将其重新添加来做到这一点，如果我尝试将相同的元素拖回可放置区域，它将无法删除。我已经测试过尝试重新初始化可放置区域，但这似乎并没有改变任何东西。

$(document).ready(function () {
createDraggable();
createDroppable();
});
function createDraggable(){
$(".word").draggable({
containment: ".stage",
revert: 'invalid',
revertDuration: 0
});
}
function disableOtherDraggable(except){
$(".word:not(#" + except.attr('id') + ")").draggable('disable');
}
function createDroppable(){
$('.drop').droppable({
tolerance: 'touch',
accept: '.word',
drop: function(event, ui) {
ui.draggable.position({
my: "center",
at: "center",
of: $(this),
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
});
$(ui.draggable).css('background', "transparent");
disableOtherDraggable(ui.draggable);
},
out: function(event, ui) {
ui.draggable.mouseup(function () {
ui.draggable.removeAttr('style');
$(".word").draggable("destroy");
createDraggable();
});
}
});
}

我希望能够让人们放下这些词，并在需要时将它们拖回去。我将设置一个按钮，以便在我工作后检查丢弃的单词是否正确。

此示例中可以拖动 4 个单词，但范围可以从 3 到 5 个

更新

这是我为任何感兴趣的人工作的更新代码。我将舞台创建为可放置区域，并根据需要打开和关闭它。

$(function() {
function createDraggable(o) {
o.draggable({
containment: ".stage",
revert: 'invalid',
revertDuration: 0
});
}
function toggleOtherDraggable() {
$(".words .word").each(function(i, val){
if(!$(val).hasClass('ui-dropped')) $(val).draggable('disable');
});
}
function createLineDroppable(){
$('.drop').droppable({
tolerance: 'touch',
accept: '.word',
drop: function(event, ui) {
ui.draggable.position({
my: "center",
at: "center",
of: $(this),
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
});
$(ui.draggable).css('background', 'transparent');
$(ui.draggable).addClass('ui-dropped');
toggleOtherDraggable();
},
out: function(){
$('#stage-drop').droppable('enable');
}
});
}
function createStageDroppable() {
$('#stage-drop').droppable({
tolerance: 'touch',
accept: '.word',
disabled: true,
drop: function(event, ui) {
$(ui.draggable).css('left', '0');
$(ui.draggable).css('top', '0');
$(ui.draggable).css('background', '');
$(ui.draggable).removeClass('ui-dropped');
$('#stage-drop').droppable('disable');
$(".words .word").draggable('enable');
}
});
}
createDraggable($(".words .word"));
createLineDroppable();
createStageDroppable();
});

Answer 1

您需要一个位置来放置.word，一个要禁用其他位置的位置，以及一个要返回的位置。

请考虑以下示例：

$(function() {
function createDraggable(o) {
o.draggable({
containment: ".stage"
});
}
function toggleOtherDraggable() {
if ($(".words .word").eq(0).hasClass("ui-draggable-disabled")) {
$(".words .word").draggable('enable');
} else {
$(".words .word").draggable('disable');
}
}
function createDropWord() {
$(".words").droppable({
tolerance: 'touch',
accept: '.word',
drop: function(event, ui) {
var item = ui.draggable;
item.removeAttr("style");
$(this).append(item);
}
});
}
function createDropStage() {
$('.drop').droppable({
tolerance: 'touch',
accept: '.word',
drop: function(event, ui) {
var item = ui.draggable;
item.appendTo(this).position({
my: "center",
at: "center",
of: $(this),
using: function(pos) {
$(this).animate(pos, 200, "linear");
}
}).css('background', "transparent");
toggleOtherDraggable();
createDropWord()
},
out: function() {
toggleOtherDraggable();
}
});
}
createDraggable($(".words > .word"));
createDropStage();
});

.word {
display: inline-block;
padding: .25em;
}
.drop {
width: 340px;
height: 100px;
background: #CCC;
margin: 20px;
}
.word.ui-draggable-disabled {
opacity: 0.45;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="stage">
<div class="ui-widget words">
<div id="word-1" class="word ui-widget-content">Word 1</div>
<div id="word-2" class="word ui-widget-content">Word 2</div>
<div id="word-3" class="word ui-widget-content">Word 3</div>
<div id="word-4" class="word ui-widget-content">Word 4</div>
</div>
<div class="drop"></div>
</div>

当您第一次拖放到.drop区域时，这将使放置的对象居中，并禁用其他可拖动对象，因此无法将它们拖入。当项目被拖出时，它们将被重新启用。

必须使用.append()或.appendTo()以便将丢弃的项添加到容器中。这适用于这两个元素。

仅在特定丢弃情况下启用revert选项。如果可放置对象不接受该项目或返回false，则当invalid是首选项时，该项目将被还原。