Safari. Wrong cursor when dragging

Question

I'm trying to add drag-and-drop functionality to my project and using slip.js for this.

To decorate cursor I've add class="draggable" to each draggable <tr>. The CSS for this class is:

.draggable:active { 
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;
  cursor:         grabbing;
}

Drag-and-drop works fine, but in Safari when I'm dragging a table row the cursor looks like cursor: text text cursor

In Chrome the cursor is OK grabbing cursor

Interesting that when I just click and hold without dragging the cursor is OK in Safari too grabbing cursor

The code seems right, difficult to help without being able to test. — Nick, Nov 14 '17 at 21:11
@LesserEvil, looks like you are right. But my problem happens in Safari but not in Chrome. — Roman Pavlov, Nov 14 '17 at 22:06

score 5 · Accepted Answer · answered Nov 14 '17 at 22:01

5

As mentioned in chrome sets cursor to text while dragging, why?, I need to disable selection when dragging. My JavaScript for this:

list = document.getElementById('demo1');

var flag_dragging = false;
list.addEventListener('mouseover', function(e){
  document.onselectstart = function(){ return false; }
});

list.addEventListener('mouseout', function(e){
  if(!flag_dragging){
    document.onselectstart = function(){ return true; }
  }
});

list.addEventListener('dragstart', function(e){
  flag_dragging = true;
});

list.addEventListener('dragstop', function(e){
  flag_dragging = false;
});

answered Nov 14 '17 at 22:01

Roman Pavlov

119
1
11

This is the only solution that worked for me - and I read many. – coolcool1994 Jan 21 '20 at 13:05
super - setting 'document.onselectstart' fixes the Safari issue – Jesper Kristiansen Sep 25 '20 at 20:08

Safari. Wrong cursor when dragging

1 Answers1

Linked