jQuery拖放不起作用
[英]jQuery drag and drop is not working
問題描述
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來解釋正在發生的事情
它應該沒有任何問題，但我認為我缺少了一些東西。
2 個解決方案
解決方案1
1 2016-03-23 12:58:16
我通過進行以下更改使它起作用。
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>
解決方案2
0 2016-03-23 12:59:57
試試下面的代碼，
<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不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.