Cursor personalizado con arrastrar y soltar un elemento HTML sin bibliotecas

Hola, hemos encontrado la respuesta a lo que buscabas, continúa leyendo y la hallarás a continuación.

Solución:

Parece que los navegadores no permiten cambiar el cursor al comienzo de una operación de arrastrar y soltar. No sé por qué, pero es un problema conocido, creo que lo harán en el futuro.

Si jQuery no es una opción, una posible forma de evitarlo es implementar un arrastrar y soltar desde cero, usando eventos del mouse y clonando el elemento fuente:

var onDragStart = function (event) 
  event.preventDefault();
  var clone = event.target.cloneNode(true);
  clone.classList.add("dragging");
  event.target.parentNode.appendChild(clone);
  var style = getComputedStyle(clone);
  clone.drag = ;
;

var onDragMove = function (event) (event.clientY+document.body.scrollTop)) - event.target.drag.y) + "px";
;

var onDragEnd = function (event)  event.out) 
    event.target.parentNode.removeChild(event.target);
   else 
    event.target.parentNode.removeChild(event.target.drag.source);
  
  event.target.classList.remove("dragging");
  event.target.drag = null;
;

var onDragOver = function (event) 
  event.preventDefault();
;

.dropzone 
  width: 500px;
  height: 200px;
  background-color: silver;


.block 
  position: absolute;
  background-color: pink;
  margin: 10px;
  border: 20px solid pink;


.draggable 
  position: absolute;
  cursor: pointer; /* IE */
  cursor: -webkit-grab;
  cursor: grab;


.dragging 
  cursor: -webkit-grabbing;
  cursor: grabbing;
  background-color: red;

  Grab and drag block around
  

    I'm draggable
  

Es un problema conocido reportado aquí

Mientras arrastra, el cursor cambiará automáticamente a la normalidad.

Mis intentos me dieron lo siguiente. dio un active en el elemento con el cursor de agarre. Mientras esté activo, el cursor cambiará, pero una vez que comience a arrastrar, cambiará automáticamente.

traté de establecer body cursor para agarrar en dragstart pero sin resultado. Incluso no está funcionando.

var onDragStart = function(event) 
    event.dataTransfer.setData("Text", event.target.id);
    event.currentTarget.classList.add("being-dragged");
;

var onDragEnd = function(event) 
    event.currentTarget.classList.remove("being-dragged");
;

var onDragOver = function(event) 
    event.preventDefault();
;

.dropzone 
    width: 500px;
    height: 200px;
    background-color: silver;


.block 
    position: absolute;
    background-color: pink;
    margin: 10px;
    border: 20px solid pink;


.draggable 
    cursor: -webkit-grab;
    cursor: grab;


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

.being-dragged
    background-color: red;
    cursor : -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;

    Grab and drag block around
    

        I'm draggable
    

Valoraciones y comentarios

Recuerda algo, que tienes concesión de reseñar si encontraste tu aprieto .

---

---

Utiliza Nuestro Buscador