如何将可拖动对象附加到新的可放置区域? [英] How to append draggable into new droppable area?

问题描述

我有3种不同的jQuery droppables.

I have 3 different 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可拖动对象，

I have one jQuery draggable that I'm using clone with

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

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

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

If I move my draggable into droppable 1, I need to be able to attach/append the clone it creates inside droppable 1 so that it reads..

<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下，而实际上并没有真正删除该元素，就像...

However, if I were to move it from droppable1 containment area into droppable2's then it would move it under droppable2, without actually deleting the element of course, to read like...

<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>

推荐答案

这里是一个示例，希望它就是您想要的.

Here is an example, I hope it's what you wanted.

如果您要检查(一次删除)该元素是否已完全放入容器中，则可以使用

If you want to check (once dropped) if the element was dropped completely inside the container, you can use my answer from this question. Note the the droppable element is this (inside the drop callback function)

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();

这篇关于如何将可拖动对象附加到新的可放置区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！