Content is selected when dragging in Safari

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

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

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.

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

#997, #998: + prevent on forceFallback

26a7c97

@RubaXa

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

February 19

@RubaXa

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

I still experience this in Firefox 52 with Sortable 1.5.1.

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 :(

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(); }

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

Related to #1935

I am also experiencing this

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

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.

Navigation Menu

Repository navigation

Content is selected when dragging in Safari #997

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Content is selected when dragging in Safari #997

Description

Activity

rafwell commented on Jan 6, 2017

nmcgann commented on Jan 19, 2017

rafwell commented on Jan 20, 2017

RubaXa commented on Feb 15, 2017

itamargiv commented on Feb 16, 2017

RubaXa commented on Feb 16, 2017

itamargiv commented on Feb 21, 2017

iamakulov commented on Mar 16, 2017

brice-t commented on Apr 27, 2017

brice-t commented on Apr 28, 2017

magnnus commented on Jan 19, 2018

vegerot commented on Feb 26, 2021

lukasz-zaroda commented on Aug 2, 2024

narath commented on Oct 21, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions