dragInit and e.preventDefault

[dragosu]

Having e.preventDefault in dragInit prevents any other stuff from working if the 'mousedown' event is needed for something else on the sortable items. Maybe there should be some extra option for this or remove e.preventDefault ?

[johnny]

I think e.stopPropagation() might be the culprit here. e.preventDefault() is needed to allow dragging of links by default.

I will get rid of e.stopPropagation(). It worked for me but your concern is valid. Thanks for pointing it out.

[dragosu]

Maybe it would be better to check if the mousedown was over a link in the first place (and only stop any other events when it is in the drag operation). In my case I used the focusin event on the container and I think once you call e.preventDefault() .. it is not triggered anymore.

[johnny]

I pushed a commit that hopefully solves your problem. Could you try, if this works and report back?

I did not remove e.preventDefault on dragInit since this method should not have any effect on event propagation (see http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-uievents).

[dragosu]

I checked, for my case it's not working well. Seem not to get a 'focusin' event (on the top container) once I click on a item and I can only drag a item first time I click over it (if I click a second time over any of them .. I can't drag items anymore).

[johnny]

Then I need more information. Which Browser are you using? Do you have a minimal working example which demonstrates this behaviour? Do you need focusin while dragging?

BTW, focusin while dragging will not work, since the focus is on the item that is being dragged and does not change. If you need this behaviour, look at http://johnny.github.io/jquery-sortable/#nested

[dragosu]

Tested on FF 20; I wanted to use your plugin with https://github.com/dragosu/jquery-aciTree to implement drag&drop support (for sorting items). The problem is that focusin is not triggered if there is a e.preventDefault() in dragInit and my plugin is using that event to show focus on the selected item. The code is experimental, I was testing other plugins too.

[johnny]

So you need focusin for checkboxes?

[dragosu]

No, I use focusin to tell when the tree control gets focus and show the item selection with specific color (blue instead of gray; gray when a item is selected but the control does not have focus). focusin is triggered even if a child element gets the focus so I can tell if the control itsef has the focus at a specific moment in time. If the control has focus then the keyboard can be used for navigation ...

[johnny]

Edit: I just noticed, there is a bug in my commit above, exactly as you described it. I should have read better the first time. I will try to fix it.

[johnny]

Please try again

[dragosu]

About the focus, I think setting the focus to the link (if the mousedown was over a link in the first place) it's the way to do it because we'll get focusin on the parent. About text selection... I have found I can cancel it with:
if (window.document.selection) { window.document.selection.empty(); } else if (window.getSelection) { window.getSelection().removeAllRanges(); }
when in drag (also will scroll the content as where a text selection, but not working too well in Chrome).
You can make a little test by setting tabIndex attribute on a container and listen for the focusin on it. Now does not seem to receive it (and it should, even for mousedown on any children).