拖放：Draggable 附加到 droppable答案

【问题标题】：Drag and drop: Draggable append to droppable拖放：Draggable 附加到 droppable
【发布时间】：2017-03-09 13:06:42
【问题描述】：

我有一个项目 http://jsfiddle.net/x5T4h/566/ 。

html:

<div class="dropable base">
  <div class="draggable">Div1</div>
  <div class="draggable">Div2</div>
  <div class="draggable">Div3</div>
  <div class="draggable">Div4</div>
</div>

<div class="places">
    <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
  <div class="droppable">Move here div</div>
</div>

jQuery 用户界面：

$('.droppable').droppable({ tolerance: "touch" });
$('.draggable').draggable({ revert: "invalid" });
$('.base').droppable();

我想：

在拖放时将可拖动附加到可放置。我试过了使用 helper 和 appendTo 函数，但它不是这样工作的正在寻找。我想让拖放到相同的位置并且与 droppable 相同的大小（除了类 .base）。它应该看起来像可拖动的布局在同一位置的可放置。我什么都试过了。
只能将一个可拖动对象拖放到一个可拖放对象。

我尝试了所有方法，但仍然没有像我预期的那样工作。

【问题讨论】：

您想要保留可拖动的“槽”吗？是否应该再次使拖放的元素可拖动？目前尚不清楚您希望发生什么。

标签： jquery jquery-ui drag-and-drop draggable droppable

【解决方案1】：

有很多方法可以做到这一点，但您在问题中寻找的内容并不完全清楚。这是我的建议。

工作示例：http://jsfiddle.net/Twisty/x5T4h/568/

JavaScript

$(function() {
  $('.droppable').droppable({
    tolerance: "touch",
    drop: function(e, ui) {
      $(this).append(ui.draggable);
      $(this).find(".draggable").css({
        position: "absolute",
        top: 0,
        left: 0,
        margin: "-1px",
        width: $(this).width() + "px"
      });
      $(e.target).droppable("disable");
    }
  });
  $('.draggable').draggable({
    revert: "invalid",
    zIndex: 1000
  });
  $('.base').droppable();
});

希望对您有所帮助。

【讨论】：