CODEWITHSUNDEEP
jqueryjquery-ui
eqiz
eqiz

Reputation: 1591

How to append draggable into new droppable area?

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>

Upvotes: 1

Views: 1257

Answers (1)

Dekel
Dekel

Reputation: 62666

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();

Upvotes: 2

Related Questions