Sortable: Content is selected when dragging in Safari

[rickycheers]

Using Safari 9.1.1 in (OSX 10.11.5)

When forceFallback option is enabled, and you try to drag an element, the content is being selected.

Demo: http://jsbin.com/vebetod/edit?html,js,output

Related issue: https://github.com/RubaXa/Sortable/issues/628 and it's fix https://github.com/RubaXa/Sortable/pull/742

Will post a PR in a few minutes

[rafwell]

Try add this to your sortable item css:

.item{
-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

this worked for me. ref: http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css

[nmcgann]

This also fixed a firefox bug for me where I could only drag a paragraph of line-wrapped text inside a h4 with a handle class if I picked it up by the first line. On subsequent lines text was being selected instead of the paragraph moving.

This behavior wasn't present in Chrome or Edge.

[rafwell]

For me it worked in Chrome. However, I found so many other bugs that I decided to go back to Jquery Sortable. I use this directive to work with angular and is fully functional: https://github.com/angular-ui/ui-sortable

[RubaXa]

https://github.com/RubaXa/Sortable/commit/26a7c9767ede94887d4e9c6dda18c19f5037ecc5

[itamargiv]

@RubaXa Fantastic! thank you for the fix. When is the next version release planned?

[RubaXa]

February 19

[itamargiv]

Hey @RubaXa.

It seems as though the problem still persists (at least for IE) in v1.5.0. Looks like the changes you made in the mentioned commit above were reverted by https://github.com/RubaXa/Sortable/commit/03b49f72948db77538d2da5234ac273dd55ce8d9

[iamakulov]

I still experience this in Firefox 52 with Sortable 1.5.1.

[brice-t]

I do to in FF 53. If I put a -moz-user-select: none; rule on items or on container, the drag n' drop is buggy (mouse button needs to be released, then you can drag, and click will drop). Could not find a fix. Really annoying :(

[brice-t]

I could hack a working solution putting a -moz-user-select: none; rule on the container and using RubaXa's patch, with a condition for Firefox :
var isFirefox = typeof InstallTrigger !== 'undefined'; if ( isFirefox && options.forceFallback ) { evt.preventDefault(); }

[magnnus]

Hi, I still experience this in Safari 11.0.1 & macOS 10.13.1. But I set a css attribute to the parent element { user-select: none ; -webkit-... } , by this can fix the bug