Search code examples
csssafaridrag-and-dropcross-browsercursor

Safari. Wrong cursor when dragging


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


Solution

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