CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggablejquery-ui-droppable
Habibur Rahman
Habibur Rahman

Reputation: 83

How to make droppable to the parent and child div using jquery ui?

I want to drag an element and drop that on a child which is drop earliar using jquery ui.

Here Div-1 ,Div-2 and Column are draggable element.They can be dropped in the div(Drop here).I dropped the Column in the div(Drop here).Then I wanted to drop another div on the Column .But they couldn't drop there.

Here HTML code..

<div id="draggable1" class="div">
  <p>Div-1</p>
</div>
<div id="draggable2" class="div">
  <p>Div-2</p>
</div>
<div id="column" class="div">Column</div>

<div id="droppable">
  <p>Drop here</p>
</div>

And the jquery part...

$(function () {
    $("#draggable1").draggable({
      helper: "clone",
    });
    $("#draggable2").draggable({
      helper: "clone",
    });
    $("#column").draggable({
      helper: "clone",
    });
    $("#column").droppable({
      drop: function (event, ui) {
        $("#droppable").droppable("disable");
        var columnItem = $(ui.draggable).clone();
        console.log(columnItem);
        $(this).append(columnItem);
      },
    });
    $("#droppable").droppable({
      drop: function (event, ui) {
        var droppedItem = $(ui.draggable).clone();
        console.log(droppedItem);
        $(this).append(droppedItem);
      },
    });
  });

Upvotes: 0

Views: 903

Answers (1)

Fugitive
Fugitive

Reputation: 11

I guess the better way is to use the greedy option of droppable. Don't forget to go through the API if you find any problems.

http://api.jqueryui.com/droppable/#option-greedy

Here is how your code looks like with the greedy option:

$(".child").droppable({ 
    accept: '.item',
    greedy: true,
    drop: function(e, ui){ 
     alert("drop on child");
    }
});

There you go... !!!

Upvotes: 1

Related Questions