如何将可拖动附加到新的可放置区域？

Question

我有 3 个不同的 jQuery droppables。

$(".pages").droppable({
        accept: ".draggable"
});

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable2" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable3" class="droppable" style="height: 300px; width: 300px;"></div>

我有一个 jQuery 可拖动对象，我正在使用克隆对象

 $(".draggable").draggable({
        helper:'clone'
    });

<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>

如果我将我的可拖动对象移动到可放置对象 1 中，我需要能够附加/附加它在可放置对象 1 中创建的克隆，以便读取..

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

但是，如果我要将它从 droppable1 包含区域移动到 droppable2 中，那么它会将其移动到 droppable2 下，当然不会实际删除元素，读起来就像...

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
</div>

<div id="droppable2" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

Answer 1

这是一个例子，我希望它是你想要的。

如果您想检查（一旦丢弃）元素是否完全放入容器中，您可以使用我在this question 的回答。注意droppable 元素是this（在drop 回调函数中）

function setDraggable(el, doClone) {
  el.draggable({
    helper: doClone ? 'clone' : 'original',
    revert: true
  });
}
$(".droppable").droppable({
  accept: ".draggable",
  drop: function( event, ui ) {
    cloned = ui.helper.clone().css({'position': '', 'top': '', 'left': ''});
    setDraggable(cloned, false)
    
    $( this )
    .addClass( "ui-state-highlight" )
    .append(cloned)
    ui.helper.hide();
  }
});
setDraggable($(".draggable"), true);

.droppable {
  border: 1px solid red;
  float: left;
  margin-left: 10px;
}

.draggable {
  border: 1px solid green;
  padding: 5px;
  margin: 0;
}
.draggable p {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="droppable1" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable2" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable3" class="droppable" style="height: 150px; width: 150px;"></div>

<br style="clear: both" />
<br />

<div class="draggable">
  <p>Drag Me</p>
</div>

在示例中，我只隐藏了原始拖动的元素如果你想将它从 DOM 树中完全删除，你可以将 ui.helper.hide(); 更改为 ui.helper.remove();