How to append draggable into new droppable area?

Question

I have 3 different jQuery droppables.

$(".pages").droppable({
        accept: ".draggable"
});

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable2" class="droppable" style="height: 300px; width: 300px;"></div>
<div id="droppable3" class="droppable" style="height: 300px; width: 300px;"></div>

I have one jQuery draggable that I'm using clone with

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

<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>

If I move my draggable into droppable 1, I need to be able to attach/append the clone it creates inside droppable 1 so that it reads..

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

However, if I were to move it from droppable1 containment area into droppable2's then it would move it under droppable2, without actually deleting the element of course, to read like...

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
</div>

<div id="droppable2" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

Here is an example, I hope it's what you wanted.

If you want to check (once dropped) if the element was dropped completely inside the container, you can use my answer from this question. Note the the droppable element is this (inside the drop callback function)

function setDraggable(el, doClone) {
  el.draggable({
    helper: doClone ? 'clone' : 'original',
    revert: true
  });
}
$(".droppable").droppable({
  accept: ".draggable",
  drop: function( event, ui ) {
    cloned = ui.helper.clone().css({'position': '', 'top': '', 'left': ''});
    setDraggable(cloned, false)
    
    $( this )
    .addClass( "ui-state-highlight" )
    .append(cloned)
    ui.helper.hide();
  }
});
setDraggable($(".draggable"), true);

.droppable {
  border: 1px solid red;
  float: left;
  margin-left: 10px;
}

.draggable {
  border: 1px solid green;
  padding: 5px;
  margin: 0;
}
.draggable p {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="droppable1" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable2" class="droppable" style="height: 150px; width: 150px;"></div>
<div id="droppable3" class="droppable" style="height: 150px; width: 150px;"></div>

<br style="clear: both" />
<br />

<div class="draggable">
  <p>Drag Me</p>
</div>

In the example I only hide the original dragged element If you want to remove it completely from the DOM tree you can change ui.helper.hide(); to ui.helper.remove();

edited May 23 '17 at 12:22

Community

1
1

answered Aug 26 '16 at 01:13

Dekel

60,707
10
101
129

I am wanting to be able to drag the item from 1 droppable area to the next basically. So once I do the "DRAG ME" toe the first box, I should be able to move it from the first box to the box on the right of it, and vise versa. – eqiz Aug 26 '16 at 01:25
I extremely appreciate your help on this. The only last thing I don't know how to do is when its moved (as mentioned in original post) that it will actually show up under the
that it was moved to. For example right now if I drag it to the 3rd box. in HTML its now listed inside the
but if i move it to the dropple2 its still listed inside the droppable3 when inspected. Hope this makes sense.
– eqiz Aug 26 '16 at 01:42
Just use `ui.helper.remove();` instead of `ui.helper.hide();` – Dekel Aug 26 '16 at 02:02
That is awesome man! Please update answer and I'll mark as accepted. You have no idea how many hours I've spent researching and trying this on my own. I had no idea about some of the parts you did under draggable. Apparently I need to read up on a lot more. Thanks a ton! – eqiz Aug 26 '16 at 02:06
I added an explanation at the end of the answer regarding the `hide` vs `remove`. – Dekel Aug 26 '16 at 02:08
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121879/discussion-between-dekel-and-eqiz). – Dekel Aug 26 '16 at 02:08

How to append draggable into new droppable area?

1 Answers1

Linked