javascript - jQuery 拖放功能不起作用

Question

HTML 代码。

<div class="pin-list">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

<div id="drop-area">

</div>

JS 代码。

$( ".pin-list div" ).draggable({
    helper: "clone"
});

$( "#drop-area" ).droppable({
    accept: ".pin-list div",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active"
});

我创建了这个JSFiddle解释发生了什么

它应该可以正常工作，但我认为我错过了一些东西。

Answer 1

我通过进行以下更改使其正常工作。

JS:

$( "#dragme div" ).draggable({
});

$( "#drop-area" ).droppable({
accept: "#dragme div",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active"
});

我还对 HTML 做了一些小改动:

<div id=dragme class="pin-list ui-widget-content">
   <div>test</div>
   <div>test</div>
   <div>test</div>
   <div>test</div>
 </div>

<div id="drop-area">

</div>

Fiddle