JQuery Draggable Droppable and Sortable at the same time for DOM Manipulation

Question

I am trying to customize a somme drag-and-drop view of a wysiwyg editor using jQuery UI.

I have successfully configured the elements, but they have strange behavior.

It is almost impossible to sort items due to constant flickering.

i configure my draggables as follows:

el.draggable({ containement:'.main-form-container', revert: "invalid", connectToSortable: '.sortable' }).disableSelection(); 

If I don't set it as draggable, the sortable will place the placeholder on itself! why?

Sometimes, when an element falls into another, it becomes ONE draggable element and seems to be glued together. although this seems to be fixed with an overriding sortable update:

 update: function (event, ui) { $(ui.item).css({ position: 'relative', top:0, left:0, width: 'auto' }); // init droppable draggable and sortable on this item setupDandD($(ui.item)); } 

and setupDandD method:

 setupDandD($('.form-container')); function setupDandD(el) { el.draggable({ containement:'.main-form-container', revert: "invalid", connectToSortable: '.sortable' }).disableSelection(); el.droppable({ accept: '[data-section="toolbox"]', greedy: true, hoverClass: 'droppable-hovered', drop: handleDrop }).disableSelection(); el.filter('.sortable').sortable({ tolerance:'pointer', containement:'.main-form-container', connectWith: ".sortable:not(#" + $(this).id + ")", revert: 'invalid', helper: function () { return $(this); }, update: function (event, ui) { console.log('here'); $(ui.item).css({ position: 'relative', top:0, left:0, width: 'auto' }); setupDandD($(ui.item)); } }).disableSelection(); }; 

I guess I need to dial some kind of event somewhere on the sortable, but now I'm completely lost ...

Answer 1

Good! I found him!

In fact, my biggest mistake was to mix droppable and sortable at the same time. I just had to use sort and drag using the connectToSortable option.

Another strange behavior I had was sorting, which is trying to insert into myself. This is because the sortable "connectWith" was set to the selector, which returned itself, and therefore it instantly put the placeholder in itself when dragging. Logically enough!

To overcome this, I simply surrounded every child sorted with a div. This makes the div a sortable element and prevents events from triggering on itself.

When using Draggable + sortable, keep in mind that the sortable will always clone the object, as it was when running drag. This means that even if you use a custom drag and drop helper, it will still insert the original element. To do this, I had to replace the element in the "stop" event of the sort with the one I need if it appeared from my toolbar:

 $('.main-form-container').sortable({ placeholder: "sortable-placeholder", opacity: .35, connectWith: ".sortable", stop: function (e, t) { if (t.item.attr('data-section') == "toolbox") { $(t.item).replaceWith(createContainer()); } $(".sortable").sortable({ opacity: .35, placeholder: "sortable-placeholder", connectWith: ".sortable" }).disableSelection(); } }).disableSelection(); 

and here is the working fiddle: http://jsfiddle.net/jmorvan/ag659/

I understand that there is probably a cleaner way to make this last fix by overriding some possibly undocumented events in sortable / draggable, but it did the trick for me!