jquery-ui-draggable – Page 2

When I make a draggable clone and drop it in a droppable I cannot drag it again

April 13, 2023 by Tarik

One way to do it is: $(document).ready(function() { $(“#container”).droppable({ accept: ‘.product’, drop: function(event, ui) { $(this).append($(“ui.draggable”).clone()); $(“#container .product”).addClass(“item”); $(“.item”).removeClass(“ui-draggable product”); $(“.item”).draggable({ containment: ‘parent’, grid: [150,150] }); } }); $(“.product”).draggable({ helper: ‘clone’ }); }); But I’m not sure if it is nice and clean coding.

jQuery Droppable, get the element dropped

April 12, 2023 by Tarik

From the drop event documentation: This event is triggered when an accepted draggable is dropped ‘over’ (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. While ui.draggable represents the draggable. So: $(“#dock”).droppable({ drop: function(event, ui) { // do something with the dock $(this).doSomething(); // do something … Read more

jQuery draggable shows helper in wrong place after page scrolled

February 6, 2023 by Tarik

This might be a related bug report, it’s been around for quite a while: http://bugs.jqueryui.com/ticket/3740 It seems to happen on every browser I tested (Chrome, FF4, IE9). There are a few ways you can work around this issue: 1. Use position:absolute; in your css. Absolutely positioned elements don’t seem to be affected. 2. Make sure … Read more

Draw a connecting line between two elements [closed]

November 30, 2022 by Tarik

jsPlumb is an option available that supports drag and drop, as seen by its numerous demos, including the Flowchart demo. It is available in a free Community edition and a paid Toolkit edition. The Toolkit edition wraps the Community edition with a comprehensive data binding layer, as well as several UI widgets for building applications … Read more