javascript - 拖放到 div 的特定区域

Question

<div id="main_div">
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>

我使用 jquery draggable 和 dropabble 进行拖放。

我希望当元素放在 main_div 上时，它会掉落到 div4 而不是 main_div。

$( "#draggable" ).draggable();
$( "#main_div" ).droppable();

我怎样才能做到这一点？

Answer 1

你可以这样做:

$("#draggable").draggable();
$("#main_div").droppable({
  drop: function(ev, ui) {
    $item = $(ui.helper);
    $($(this).find('#div4')).append($item);
  }
});

Online demo (jsFiddle)