CODEWITHSUNDEEP
parent-childdragjquery-ui-draggablejquery-ui-droppabledrop
Habibur Rahman
Habibur Rahman

Reputation: 73

How to drag a element on the draggable element that is child of droppable element?

I am working a drag and drop project using jquery UI. In this project I have used two div.In the first div there are some element.I want to drag them so that I can drop them in the 2nd div.Besides I want to use the draggable element as droppable element so that I can drop another draggable elemen here.

Here the demo of the project... enter image description here

Here the element are draggable.I want to drag Element-1 and drop it in the right side div so that Element-2 can also be dropped in the Element-1.

Here HTML body section ...

 <div class="left-div">
  <div class="dragElemnt" id=" draggable1">
    <p>Element-1</p>
  </div>
  <div class="dragElemnt" id=" draggable2">
    <p>Elemnet-2</p>
  </div>
  <div class="dragElemnt" id=" draggable3">
    <p>Element-3</p>
  </div>
</div>

<div id="droppable" class="right-div">
  <p>Drop here</p>
  
</div>

Here script section...

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

        $("#draggable1").droppable({
          drop: function (event, ui) {
            var columnItem = $(ui.draggable).clone();
            $(this).append(columnItem);
          },
        });
      },
    });
  });

How can I solve it?

Upvotes: 0

Views: 237

Answers (1)

til
til

Reputation: 1215

According to this Question: How to know the dragging element is over which element?

$('#droppableid').droppable({
    over: function(event, ui) {
        log('You are over item with id ' + this.id);
    }
});

Upvotes: 0

Related Questions