Ticket #3163 (closed bug: worksforme)

Opened 2 years ago

Last modified 12 months ago

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:

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

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

Change History

Changed 2 years ago by mlang74

Demonstrates that nested sortables are not working

Changed 2 years ago by mlang74

related to #1364

Changed 2 years ago by mlang74

Correction, related to #3164

Changed 2 years ago by mlang74

Example file updated with working resize event code

Changed 2 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

Changed 2 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

Changed 2 years ago by mlang74

my comment was mangled... One more try.

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

Changed 2 years ago by mlang74

Problem solution - added brackets around connectWith selector

Changed 2 years ago by paul

  • status changed from new to closed
  • resolution set to worksforme
Note: See TracTickets for help on using tickets.