Exploring the jungle. Cursor acting strange while dragging

Question

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js.

To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is:

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

The drag-and-drop feature functions correctly, but there is an issue with Safari where the cursor appears as cursor: text when dragging a table row.

In contrast, Chrome displays the cursor correctly.

Interestingly, in Safari, if I just click and hold without dragging, the cursor appears normal as well.

css safari drag-and-drop cross-browser cursor

Answer 1

Answer №1

In reference to the question posed in why does Chrome change cursor to text while dragging?, I have implemented a solution to disable text selection during drag events using JavaScript:

var targetElement = document.getElementById('demo1');
var isDragging = false;

targetElement.addEventListener('mouseover', function(event) {
  document.onselectstart = function(){ return false; }
});

targetElement.addEventListener('mouseout', function(event) {
  if(!isDragging){
    document.onselectstart = function(){ return true; }
  }
});

targetElement.addEventListener('dragstart', function(event) {
  isDragging = true;
});

targetElement.addEventListener('dragstop', function(event) {
  isDragging = false;
});

Answer 2

In reference to the question posed in why does Chrome change cursor to text while dragging?, I have implemented a solution to disable text selection during drag events using JavaScript:

var targetElement = document.getElementById('demo1');
var isDragging = false;

targetElement.addEventListener('mouseover', function(event) {
  document.onselectstart = function(){ return false; }
});

targetElement.addEventListener('mouseout', function(event) {
  if(!isDragging){
    document.onselectstart = function(){ return true; }
  }
});

targetElement.addEventListener('dragstart', function(event) {
  isDragging = true;
});

targetElement.addEventListener('dragstop', function(event) {
  isDragging = false;
});

Exploring the jungle. Cursor acting strange while dragging

Answer №1

Similar questions

Struggling with incorporating a Carousel feature while navigating through an array

Issue with React-Route not displaying components

How to target the nth child element uniquely in CSS

Can you explain the distinction between align-content and align-items?

How does using position: fixed affect width in React components?

Library of User Interface components for React Native applications

Designing a Curved Stepper Component in the Shape of an S

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

"Clicking on the dropdown menu will consistently result in it collapsing

Enhancing PHP Markdown to Support Custom CSS Classes

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

Conceal the object, while revealing a void in its place

Reveal content as you scroll

Horizontal Screen Sharing on iPad

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

The footer is being covered by the section, despite my attempts to address the issue with

conceal a targeted section from the bottom of the iframe

Internet Explorer fails to execute CSS or jQuery commands

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By