How e when I drag my draggable div to droppable1 div it always gets placed in droppable2 div.

In addition I followed the jQuery UI snap-back option but it does not work. How could I make it that instead of dragging the actual draggable element it drags an instance/copy of it and have droppable accept multiple of these draggable elements.

<script src=".10.3/jquery-ui.js"></script>
<script>
  $(function() {
    $( '#draggable' ).draggable();

    $( '#droppable1' ).droppable({
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });

    $( '#droppable2' ).droppable({
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });



  });
</script>

<div class="well">
  <div id="draggable">CONTENT</div>
</div>

<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>

How e when I drag my draggable div to droppable1 div it always gets placed in droppable2 div.

In addition I followed the jQuery UI snap-back option but it does not work. How could I make it that instead of dragging the actual draggable element it drags an instance/copy of it and have droppable accept multiple of these draggable elements.

<script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
    $( '#draggable' ).draggable();

    $( '#droppable1' ).droppable({
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });

    $( '#droppable2' ).droppable({
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });



  });
</script>

<div class="well">
  <div id="draggable">CONTENT</div>
</div>

<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Dec 7, 2018 at 9:23 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Oct 8, 2013 at 15:13 Sterling DuchessSterling Duchess 2,1201616 gold badges5353 silver badges9595 bronze badges 4

• a simple reading on Jqueryui. would help. – Akshay Khandelwal Commented Oct 8, 2013 at 15:19
• This is what their example states: Enable any DOM element to be droppable, a target for draggable elements. And I followed their example so no. – Sterling Duchess Commented Oct 8, 2013 at 15:21
• You want something like this? jsfiddle/IrvinDominin/v3L7A – Irvin Dominin Commented Oct 8, 2013 at 15:23
• @IrvinDomininakaEdward How you answered all 3 of my questions there. Thanks if you put it down as answer ill accept it +1 – Sterling Duchess Commented Oct 8, 2013 at 15:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use the accept filter to accept specific items in specifc droppable area.

$( '#droppable1' ).droppable({
      accept: '#draggable',
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });

You can use a clone helper for the draggable option, than in the drop event clone and append the dropped helper.

Code:

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});

Demo: http://jsfiddle/IrvinDominin/v3L7A/