Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#3163 closed bug (worksforme)

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

Reported by: mlang74 Owned by: paul
Priority: major Milestone: 1.7
Component: ui.sortable Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Attachments (3)

Sortables_NestedError.html (3.3 KB) - added by mlang74 11 years ago.
Demonstrates that nested sortables are not working
Sortables_NestedError_r2.html (3.4 KB) - added by mlang74 11 years ago.
Example file updated with working resize event code
Sortables_NestedError_r3.html (3.3 KB) - added by mlang74 11 years ago.
Problem solution - added brackets around connectWith selector

Download all attachments as: .zip

Change History (9)

Changed 11 years ago by mlang74

Attachment: Sortables_NestedError.html added

Demonstrates that nested sortables are not working

comment:1 Changed 11 years ago by mlang74

related to #1364

comment:2 Changed 11 years ago by mlang74

Correction, related to #3164

Changed 11 years ago by mlang74

Example file updated with working resize event code

comment:3 Changed 11 years ago by 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

comment:4 Changed 11 years ago by 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

comment:5 Changed 11 years ago by mlang74

my comment was mangled... One more try.

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

Changed 11 years ago by mlang74

Problem solution - added brackets around connectWith selector

comment:6 Changed 11 years ago by paul

Resolution: worksforme
Status: newclosed
Note: See TracTickets for help on using tickets.