#10671 closed bug (patcheswelcome)

Opened October 22, 2014 12:44PM UTC

Closed October 22, 2014 05:47PM UTC

Last modified May 07, 2018 12:33PM UTC

Pseudo-class :active gets suppressed by ui.sortable in Firefox

Reported by: Thomeeque Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.2
Keywords: Cc:
Blocked by: Blocking:
Description

Hi guys,

on sortable UL list I am trying to achieve different styling (move shape cursor, highlighted background) of the item when user "mousedowns" it and the item is ready to be dragged.

I was able to achieve this using li:active CSS selector, problem is, that in the Firefox (33.0) :active pseudo-class does not appear on the item when the ui.sortable is activated:

http://jsfiddle.net/vp5jy3vk/ (jQuery 2.0.2 + jQuery UI 1.10.3 ~ the newest on jsfiddle)

http://jsfiddle.net/jLut0L1u/ (jQuery 1.6.4 ~ the oldest on jsfiddle)

(I am getting same behavior with jquery-2.1.1 + jquery-ui-1.11.2 offline)

To see it fully functional try with Chrome, please.

I expect that it is caused by different way the mousedown event bubbles thru in the FF and other browsers and that in FF ui.sortable somehow stops propagation of this event before :active would get triggered.

Please note, I am aware of the ui-sortable-helper class, but this class is not added until user starts to drag item.

Thanks in advance for any feedback, cheers, Tomas

Attachments (0)
Change History (2)

Changed October 22, 2014 05:47PM UTC by tj.vantoll comment:1

resolution: → patcheswelcome
status: new → closed

Interesting. I'm not sure why 

:active
doesn't work here, but it's trivial to write an extension to implement this behavior:

$.widget( "ui.sortable", $.ui.sortable, {
    _create: function() {
        this._super();
        this._on( this.element, {
            "mousedown > *": function( event ) {
                $( event.target ).addClass( "ui-sortable-active" );
            },
            "sortstop": function( event, ui ) {
                $( ui.item ).removeClass( "ui-sortable-active" );
            }
        });
    }
});

Here's an example of it in use: http://jsfiddle.net/tj_vantoll/gr1mjnpL/. I'm going to close this ticket as patcheswelcome. If someone can find why 

:active
doesn't work and can provide a reasonable PR we'll consider it, otherwise you can use the extension to implement this behavior.

Changed May 07, 2018 12:33PM UTC by MikeMatusz comment:2

The example provided is not the same behavior as :active at all, and has several issues. Trying to actually duplicate the behavior becomes less trivial. For one, :active only applies while the mouse is held down, when it's released the state should be cleared. Also, if any of those list items contain more complex content, this is applying the class to whatever nested element was clicked. Lastly, if you click multiple elements without dragging, they all turn orange. With these requirements, the extension becomes a bit less trivial.

Why it's not working to begin with is the event.preventDefault() inside the mouseDown handler of ui.mouse (which is calling the _mouseCapture implementation of sortable). If you remove that preventDefault, :active works correctly (although I assume many other things would not, so definitely not proposing that as a solution).

See:

At the moment, it doesn't look like there's going to be any fix from their end in the near future...