Nesting Sortables is not working - connecting all groups of same class

[mlang74]

In a scenario where you want to connect mutliple sort groups in a single jQuery call the nested sortables do not work.

$('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:'.contentGroup', opacity:'.5'});

I have a sample html file including the css, and page script. See attached.

[mlang74]

Demonstrates that nested sortables are not working

[mlang74]

related to #1364

[mlang74]

Correction, related to #3164

[mlang74]

Example file updated with working resize event code

[mlang74]

Nested sortables work using prototype and scriptaculous. however, I'd prefer to use jQuery for other library features. I also prefer the resizable feature of jQuery. For the resizing in scriptaculous I had to use a draggable that when dragged resized the parent element.

Here is an example of what I want to do with jQuery UI. ​http://test.xulgent.com/prototypes/floatingcontentdivs/floatingcontent_5.html

[mlang74]

This is not a bug. I found the solution upon further inspection of the documentation. I was confused between the correct syntax to make it work in prototype and jQuery.

The solution is in how the connectWith option is specified.

$('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:.contentGroup?, opacity:'.5'});

Notice the brackets around the selector in the connectWith option.

However, sortables still do not work with resizable, see #3164

[mlang74]

my comment was mangled... One more try.

$('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:['.contentGroup'], opacity:'.5'});

[mlang74]

Problem solution - added brackets around connectWith selector