拖放到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)