Opened 7 years ago

Closed 7 years ago

Last modified 4 years ago

#10671 closed bug (patcheswelcome)

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:


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: (jQuery 2.0.2 + jQuery UI 1.10.3 ~ the newest on jsfiddle) (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

Change History (2)

comment:1 Changed 7 years ago by tj.vantoll

Resolution: patcheswelcome
Status: newclosed

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._on( this.element, {
            "mousedown > *": function( event ) {
                $( ).addClass( "ui-sortable-active" );
            "sortstop": function( event, ui ) {
                $( ui.item ).removeClass( "ui-sortable-active" );

Here's an example of it in use: 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.

comment:2 Changed 4 years ago by MikeMatusz

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).


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

Note: See TracTickets for help on using tickets.