Come cambiare l'icona del cursore durante il trascinamento in HTML5?

Question

Ho bisogno di impostare l'icona per il cursore quando un utente sta trascinando DIV (div rosso nel seguente esempio).

Ho provato diversi tentativi, incluso l'utilizzo di CSS cursor:move e event.dataTransfer.dropEffect senza esito positivo, poiché l'icona mostra sempre un "cerchio incrociato".

Qualche idea su come risolvere questo problema utilizzando l'API drag-and-drop HTML5?

http://jsbin.com/hifidunuqa/1/

<script> 
     window.app = { 
      config: { 
       canDrag: false, 
       cursorOffsetX: null, 
       cursorOffsetY: null 
      }, 
      reset: function() { 
       this.config.cursorOffsetX = null; 
       this.config.cursorOffsetY = null; 
      }, 
      start: function() { 
       document.getElementById('target').addEventListener('dragstart', function (event) { 
        console.log('+++++++++++++ dragstart') 
        this.config.cursorOffsetX = event.offsetX; 
        this.config.cursorOffsetY = event.offsetY; 
        this.adjustPostion(event); 
        event.dataTransfer.effectAllowed = 'move'; 
        event.dataTransfer.dropEffect = 'move'; 
       }.bind(this)); 
       document.getElementById('target').addEventListener('drag', function (event) { 
        console.log('+++++++++++++ drag') 
        this.adjustPostion(event); 
       }.bind(this)); 
       document.getElementById('target').addEventListener('dragend', function (event) { 
        console.log('+++++++++++++ dragend') 
        this.reset(); 
       }.bind(this));; 
      }, 
      adjustPostion: function (event) { 
       if (event.pageX <= 0 || event.pageY <= 0) { 
        console.log('skipped'); 
        return; 
       } 
       var elm = document.getElementById('target'); 
       elm.style.left = (event.pageX - this.config.cursorOffsetX) + 'px'; 
       elm.style.top = (event.pageY - this.config.cursorOffsetY) + 'px'; 
       console.log(event.pageX); 
       console.log(event.pageY); 
      } 

     }; 
    </script> 

Answer 1

uso MouseDown e MouseMove

window.app = { 
 
    dragging: false, 
 
    config: { 
 
    canDrag: false, 
 
    cursorOffsetX: null, 
 
    cursorOffsetY: null 
 
    }, 
 
    reset: function() { 
 
    this.config.cursorOffsetX = null; 
 
    this.config.cursorOffsetY = null; 
 
    }, 
 
    start: function() { 
 
    document.getElementById('target').addEventListener('mousedown', function (event) { 
 
     console.log('+++++++++++++ dragstart'); 
 
     this.dragging = true; 
 
     this.config.cursorOffsetX = event.offsetX; 
 
     this.config.cursorOffsetY = event.offsetY; 
 
     this.adjustPostion(event); 
 
    }.bind(this)); 
 
    document.getElementById('target').addEventListener('mousemove', function (event) { 
 
     if (this.dragging) { 
 
     console.log('+++++++++++++ drag'); 
 
     event.target.style.cursor = 'move'; 
 
     this.adjustPostion(event); 
 
     } 
 
    }.bind(this)); 
 
    document.getElementById('target').addEventListener('mouseup', function (event) { 
 
     console.log('+++++++++++++ dragend'); 
 
     this.dragging = false; 
 
     event.target.style.cursor = 'pointer'; 
 
     this.reset(); 
 
    }.bind(this)); 
 
    }, 
 
    adjustPostion: function (event) { 
 
    if (event.clientX <= 0 || event.clientY <= 0) { 
 
     console.log('skipped'); 
 
     return; 
 
    } 
 
    var elm = document.getElementById('target'); 
 
    elm.style.left = (event.clientX - this.config.cursorOffsetX) + 'px'; 
 
    elm.style.top = (event.clientY - this.config.cursorOffsetY) + 'px'; 
 
    console.log(event.pageX); 
 
    console.log(event.pageY); 
 
    } 
 

 
};

#target { 
 
      position: absolute; 
 
      top: 100px; 
 
      left: 100px; 
 
      width: 400px; 
 
      height: 400px; 
 
      background-color: red; 
 
      -moz-user-select: none; 
 
      -ms-user-select: none; 
 
      -webkit-user-select: none; 
 
      user-select: none; 
 
     } 
 

 
     #ui1 { 
 
      position: absolute; 
 
      top: 50px; 
 
      left: 50px; 
 
      width: 100px; 
 
      height: 400px; 
 
      background-color: blue; 
 
      z-index: 100; 
 
     } 
 

 
     #ui2 { 
 
      position: absolute; 
 
      top: 50px; 
 
      left: 550px; 
 
      width: 100px; 
 
      height: 400px; 
 
      background-color: green; 
 
      z-index: 100; 
 
     }

<!-- simulate --> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>title</title> 
 
</head> 
 
<body onload="window.app.start();"> 
 
    <div id="ui1"></div> 
 
    <div id="ui2"></div> 
 
    <div id="target"></div> 
 
</body> 
 
</html>

Answer 2

calcolata event.dataTransfer.setData(); dovrebbe risolvere il problema. Una volta che l'elemento è riconosciuto come trascinabile, il browser aggiungerà automaticamente un cursore di spostamento una volta trascinato. Ovviamente, dovrai rimuovere tutte le altre dichiarazioni cursor: move per vedere il cursore cambiare durante il trascinamento.

Esempio minimo:

document.getElementById('target').addEventListener('dragstart', function (event) { 
    event.dataTransfer.setData('text/plain', ''); 
}.bind(this)); 

Se si vuole ancora cambiare l'icona (ad esempio, per usare l'icona di trascinamento personalizzato), si potrebbe accedere lo stile elemento utilizzando event.target.style.cursor.

Per maggiori informazioni visita MDN Drag & Drop e MDN Recommended Drag Types