Geek Answers Handbook

How to debug jQuery nested sortable draggable element?

The first part allows you to transfer the element to a sortable div, which works fine. Then I want this div to become sortable, so I can drag new elements (parts) into it.

This part also works fine, except when you reorder the elements (dark), this will not allow you to insert the part back into it until you reorder them again, or try placing them in one of the other elements and return to it.

It's hard to explain, but here is a screen shot: http://screencast.com/t/Ls2ksVY4Q

The demo is located at: http://jsfiddle.net/9MXWp/

Here is the relevant code:

$(document).ready(function() { $('#the-grid').sortable({ tolerance: 'pointer', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) { $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } $('.part-holder', ui.item).sortable({ tolerance: 'pointer', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } }); } }); $('#sidebar > ul > li.part').draggable({ helper: 'clone', connectToSortable: '.part-holder', addClasses: false }); $('.drag-element').draggable({ revert: 'invalid', helper: 'clone', connectToSortable: '#the-grid', addClasses: false }); $('#update-list').click(updateList); });

A recipe that seems to duplicate the problem (in FF 3.6):

  • Drag element 1 to the staging area.

  • Drag element 2 to the intermediate area; place it in front of element 1.

  • Drag the part inside element 1. ☞ Sometimes the page does not work right here. ☜ ☣

  • Drag the piece inside element 2.

  • Now drag element 2, which will be after element 1.

  • ☞ Drag the piece inside element 1; it will not work. ☜ ☣

  • Drag the piece inside element 2; it will work, and now Element 1 will accept the parts again.

+7
source share
3 answers

ok lets try it again; I added the "connectWith" parameter, then wrapped the sortable initializer ".part-holder" so that it would not be updated every time the grid was reassigned ...

 $(document).ready ( function() { $('#the-grid').sortable ( { tolerance: 'pointer', update: function (event, ui) { if( $(ui.item).has('.close').length == 0 ) { $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x<\/a>'); } if($(ui.item).has('.part-holder.ui-sortable').length == 0) { $('.part-holder', ui.item).sortable({ tolerance: 'pointer', connectWith: '.part-holder', update: function(event, ui) { if( $(ui.item).has('.close').length == 0 ) $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>'); } }); } else { // don't recreate } } } ); $('#sidebar > ul > li.part').draggable ( { helper: 'clone', connectToSortable: '.part-holder', addClasses: false } ); $('.drag-element').draggable ( { revert: 'invalid', helper: 'clone', connectToSortable: '#the-grid', addClasses: false } ); $('#update-list').click (updateList); } ); function updateList() { $('#current-list').empty(); $('#the-grid > li').each( function(index, value) { $('#current-list').append('<li>' + $(value).html() + '<\/li>'); }); }

with these changes you can add “parts” to “holders”! I saw some intermittent js errors ... I have no idea why they appear, but they don't seem to affect the page when viewing with FF 3.6

+3
source

I agree with Nick P that I think this is a sorting error. Other sortable objects lose sorting when sorting.

I added

 $('.part-holder').sortable('refresh');

before

 $('.part-holder', ui.item).sortable({

which worked for me in Chrome 11, FF3.7 and FF4.0b12pre.

+4
source

it looks like you found an error in the sortable ... a potential workaround is to recreate the ".part-holder" for sorting with each re-order ...

 $('.part-holder', ui.item).sortable('destroy');

set it right above

 ... $('.part-holder', ui.item).sortable({ ...

it hack, but hey it works ... :)

+3
source

More articles:


All Articles