HTML5’te sürüklerken imleç simgesi nasıl değiştirilir?

Question

Bir kullanıcı DIV'yi sürüklerken (aşağıdaki örnekte kırmızı boşluk) imleç ikonunu ayarlamalıyım. CSS cursor:move ve event.dataTransfer.dropEffect'u kullanma da dahil olmak üzere birkaç deneme yapmayı denedim, çünkü simge her zaman "çapraz daire" gösteriyor.

HTML5 sürükle ve bırak API'sini kullanarak bu sorunu nasıl çözebilirim?

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

kullanım mousedown görmek ve

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

event.dataTransfer.setData(); ekleme sorunu çözmek gerekir. Öğe sürüklenebilir olarak algılandığında, tarayıcı sürükledikten sonra otomatik olarak bir hareket imleci ekler. Tabii ki, sürüklerken imleci değiştiğini görmek için diğer tüm cursor: move bildirimlerini kaldırmanız gerekecektir.

Minimal örnek: Hala simgeyi değiştirmek isterseniz

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

(örn özel bir sürükle simge kullanmak üzere), sen event.target.style.cursor kullanarak eleman stilini erişebilir. Daha fazla bilgi için

MDN Drag & Drop ve MDN Recommended Drag Types