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: #628 and it's fix #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]

26a7c97

[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 03b49f7

[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

[vegerot]

Related to #1935

I am also experiencing this

[lukasz-zaroda]

I have this issue on Chromium 127.0.6533.88 , so it seems it not only happens in Safari.

[narath]

I'm using FullCalendar which still requires the forceFallback option (see this issue), and so the problem of dragging causing text selection still occurs. If you are using Tailwindcss however there is an easy workaround - for the containing element (<ul> for me) just include the "select-none" element and the selection issue goes away. See this for more: https://tailwindcss.com/docs/user-select

Hope this helps. Thanks to https://github.com/alexrudall for helping me get these 2 great libraries working together.