jQuery drag and drop is not working

Question

HTML code.

<div class="pin-list">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

<div id="drop-area">

</div>

JS code.

$( ".pin-list div" ).draggable({
    helper: "clone"
});

$( "#drop-area" ).droppable({
    accept: ".pin-list div",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active"
});

I created this JSFiddle to explain what is going

It should work without any issues but I think I'm missing something.

If you're using ```helper: "clone"``` option than you have to clone the ```clone``` node and append it to the ```droppable``` container manually in the ```drop``` event handler as shown e.g. here: http://stackoverflow.com/questions/867469/when-i-make-a-draggable-clone-and-drop-it-in-a-droppable-i-cannot-drag-it-again — dekkard, Mar 23 '16 at 13:08

score 1 · Answer 1 · answered Mar 23 '16 at 12:58

I got it to work by making the following changes.

JS:

$( "#dragme div" ).draggable({
});

$( "#drop-area" ).droppable({
accept: "#dragme div",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active"
});

Also I made a small change to the 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

score 0 · Answer 2 · answered Mar 23 '16 at 12:59

Try below code,

<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 drag and drop is not working

2 Answers2