jQuery拖放不起作用

时间:2016-03-23 12:40:50

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

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 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

尝试以下代码,

<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>