Drag and Drop into another div and move in the div only using jquery

Question

Hello,

I have a dragable div, I want to be able to drag a div and drop into another div. It should only move inside the, dropped div.

Currently I have this code

$(document).ready(function(){
    $("#move").draggable();
    $("#move1").draggable();

    $('#contain').droppable({
        drop: function(event, ui) {
             // update the draggable to be only moveable inside the droppable
             ui.draggable.draggable("option", "containment", this);
        }
    });
});

where #contain is the div that #move and #move1 has to be placed in and moved about.

Thanks Jean

Answer 1

Have a look at the containment option:

Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].

Example:

$( ".selector" ).draggable( { containment: 'parent' } );

---

Update: Read about the drop event. It is triggered whenever you drop a draggable onto a droppable.

Say you have your droppable #droppable, then you can do it this way:

$('#droppable').droppable({
    drop: function(event, ui) {
         // update the draggable to be only moveable inside the droppable
         ui.draggable.draggable("option", "containment", this);
    }
});

ui.draggable contains the element you just dropped.