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