Ticket #3164 (closed bug: fixed)

Opened 6 years ago

Last modified 4 years 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:
Blocking: Blocked by:

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 Download (3.3 KB) - added by mlang74 6 years ago.
demonstrates that resizable elements stop a sortable from working
Sortables_NestedError_r2.html Download (3.4 KB) - added by mlang74 6 years ago.
Example file updated with working resize event code
Sortables_NestedError_r3.html Download (3.3 KB) - added by mlang74 6 years ago.
Fixed the sortable capability per issue #3163. Still not compatible with resizable.
Sortables_NestedError_r4.html Download (3.8 KB) - added by mlang74 6 years ago.
Workaround solution

Change History

Changed 6 years ago by mlang74

demonstrates that resizable elements stop a sortable from working

comment:1 Changed 6 years ago by mlang74

Correction: related to #3163

Changed 6 years ago by mlang74

Example file updated with working resize event code

Changed 6 years ago by mlang74

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

Changed 6 years ago by mlang74

Workaround solution

comment:2 Changed 6 years 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

comment:3 Changed 6 years ago by paul

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in r683.

comment:4 Changed 6 years ago by rdworth

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