CODEWITHSUNDEEP
jquery
X10nD
X10nD

Reputation: 22030

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

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

Upvotes: 2

Views: 3355

Answers (1)

Felix Kling
Felix Kling

Reputation: 816442

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.

Upvotes: 2

Related Questions