draggable

Programmatically drag and drop element onto another element

This is how the jQuery UI team programmatically trigger drop event. droppable_events.js: draggable = $( “#draggable1” ).draggable(), droppable1 = $( “#droppable1” ).droppable( config ), droppable2 = $( “#droppable2” ).droppable( config ), droppableOffset = droppable1.offset(), draggableOffset = draggable.offset(), dx = droppableOffset.left – draggableOffset.left, dy = droppableOffset.top – draggableOffset.top; draggable.simulate( “drag”, { dx: dx, dy: dy }); … Read more

Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

Your thinking was correct, you have to make the small boxes greedy droppables and handle the drop event on them. The tricky part is to cancel the drag operation. By default, your draggables should start as revert:’invalid’. You don’t have to do anything if they are dragged inside the big box, which in my example … Read more

jQuery draggable + droppable: how to snap dropped element to dropped-on element

I found that Keith’s method worked for me. Since his answer doesn’t include an example implementation, I’ll post mine: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); or, slightly more concisely: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); } });

Draggable div without jQuery UI

Here’s a really simple example that might get you started: $(document).ready(function() { var $dragging = null; $(document.body).on(“mousemove”, function(e) { if ($dragging) { $dragging.offset({ top: e.pageY, left: e.pageX }); } }); $(document.body).on(“mousedown”, “div”, function (e) { $dragging = $(e.target); }); $(document.body).on(“mouseup”, function (e) { $dragging = null; }); }); Example: http://jsfiddle.net/Jge9z/ I understand that I shall … Read more

jQuery UI – Draggable is not a function?

A common reason this occurs is if you don’t also load jqueryui after loading jquery. For example: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js” type=”text/javascript”></script> <script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js” type=”text/javascript”></script> EDIT. Replace the version number for each library with appropriate or latest values for jquery and jqueryui. If this doesn’t solve the issue, review suggestions in the many other answers.