Ticket #3164 (closed bug: fixed)

Opened 20 months ago

Last modified 5 weeks ago

Sortables do not work on sorted elements that are also resizable

Reported by: mlang74 Owned by: paul
Priority: major Milestone: 1.6rc2
Component: ui.sortable Version: 1.5.2
Keywords: Cc:

Description

A sortable element that also has the resizable capability applied will not sort. I have created a sample file with sortables where the child elements being sorted are resizable. If I disable the line of code with resizing the sortable works. If I enable the resizable call resizing works, but the item will not sort.

The problem occurs if the resizable call is before or after the sortable call.

$(document).ready(function(){

$('.contentArea').resizable({resize:draggableResize, stop:draggableResizeComplete});

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

});

related to #1363 (same test file)

Attachments

Sortables_NestedError.html (3.3 kB) - added by mlang74 20 months ago.
demonstrates that resizable elements stop a sortable from working
Sortables_NestedError_r2.html (3.4 kB) - added by mlang74 18 months ago.
Example file updated with working resize event code
Sortables_NestedError_r3.html (3.3 kB) - added by mlang74 18 months ago.
Fixed the sortable capability per issue #3163. Still not compatible with resizable.
Sortables_NestedError_r4.html (3.8 kB) - added by mlang74 18 months ago.
Workaround solution

Change History

Changed 20 months ago by mlang74

demonstrates that resizable elements stop a sortable from working

Changed 20 months ago by mlang74

Correction: related to #3163

Changed 18 months ago by mlang74

Example file updated with working resize event code

Changed 18 months ago by mlang74

Fixed the sortable capability per issue #3163. Still not compatible with resizable.

Changed 18 months ago by mlang74

Workaround solution

Changed 18 months ago by mlang74

WORK AROUND: I found that if I destroy the resizable when the cursor hovers over the sortable handles then sortable suddenly works. Then I can recreate the resizable after sorting is stopped. The solution entails binding two event handlers to the moveButton class elements.

I imagine that this is a big performance overhead, but in the attached example with a relatively small DOM it is still very responsive. See attachment Sortables_NestedError_r4.html for workaround details.

It is a little flaky when you hover over a move button but do not begin to drag, because I have the autoHide option set on the resize handles. They disappear when I destroy the resizable, but do not reappear immediatly on mouseleave of the moveButton. If I move the mouse outside the resizable and back in then the resize handles reappear. This is more of an issue with the autoHide option. The jQuery bound mouseout event seems to be firing fine. If I do not use the autoHide option the handles all disappear and reappear as you would expect given this workaround. But without autoHide it is more obvious to the user that the resizable capability is being removed and added back.

It would be great if this compatibility issue between resizable and sortable could be worked out. It would then be a very robust and user friendly solution.

Thanks,

- Mike

Changed 18 months ago by paul

  • status changed from new to closed
  • resolution set to fixed

Fixed in r683.

Changed 16 months ago by rdworth

  • milestone changed from 1.6 to 1.6rc2
Note: See TracTickets for help on using tickets.