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

Answer 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拖放不起作用

2 个答案: