Drag and drop to another div and move to div with jquery only
I have a divable div, I want to be able to drag the div and go to another div. It should only move inside the dropped div.
I currently 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 where #move and # move1 are to be placed and moved.
Thanks Jean
source to share
Take a look containment
:
Drag and drop constants within the specified element or region. Possible string values: "parent", "document", "window", [x1, y1, x2, y2].
Example:
$( ".selector" ).draggable( { containment: 'parent' } );
Update: Find out about the event drop
. It runs whenever you drop the draggable on the droppable.
Say you have a droppable #droppable
, then you can do it like this:
$('#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.
source to share