jQuery拖放不起作用
Posted
技术标签:
【中文标题】jQuery拖放不起作用【英文标题】：jQuery drag and drop is not working 【发布时间】：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 事件处理程序中，如图所示，例如这里：***.com/questions/867469/…
【参考方案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>
【讨论】：
以上是关于jQuery拖放不起作用的主要内容，如果未能解决你的问题，请参考以下文章