jQuery拖放不起作用答案

【问题标题】：jQuery drag and drop is not workingjQuery拖放不起作用
【发布时间】：2016-07-10 18:17:26
【问题描述】：

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 来解释发生了什么

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

【问题讨论】：

如果您使用helper: "clone" 选项，则必须克隆clone 节点并将其手动附加到droppable 容器中的drop 事件处理程序中，如图所示，例如这里：stackoverflow.com/questions/867469/…

标签： javascript jquery html jquery-ui drag-and-drop

【解决方案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

【讨论】：

【解决方案2】：

试试下面的代码，

<html>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<div class="pin-list">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
  <div>test4</div>
</div>

<div id="drop-area">

</div>

<script>

    $(document).ready(function(){
    $( ".pin-list div" ).draggable();
    $( "#drop-area" ).droppable();
})
</script>
<body>
</html>

【讨论】：