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

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

There are two images within a container - one as the background and the other as the foreground. What measures can I take to

Change the color of the menu icon based on the specified HTML class or attribute

Establish limits for draggable item

Having trouble getting the height to work properly on your Blogger Blogspot template?

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I'm having trouble adding a background image, even though I have set it to static. What could be

What are the best ways to integrate jQuery into a React application?

Placing two tables in an HTML document

Creating a fresh CSS class and utilizing its properties in JavaScript is the task at hand

The second div element remains unselected in jQuery

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Create a website that can expand in size without relying on percentage values

Connecting two fields with a line on click in AngularJS

Error in Blinking Tooltip when Hovering Skill Bubble (React and d3)

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

How can we ensure that specific criteria are displayed once a selection is made?

Creating a unique chrome extension that swaps out HTML and JavaScript components

Avoiding the use of a particular URL when using this.router.navigate() in AngularJs