拖放：可拖动附加到droppable

Question

我有一个项目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 UI：

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

我想：

1. 在删除droppable时将其添加到droppable中。我试过了 使用helper和appendTo函数，但它不能那样工作 正在寻找。我想让掉落的拖拽位置相同 与droppable相同的大小（例外类.base）。它应该看起来像可拖动的一样 在同样的位置上的droppable。我尝试了一切。

2. 只有一个可拖动可以放到一个可放置的。

我尝试了一切，但它仍然没有像我预期的那样工作。

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

希望有所帮助。