html5的图标修改,javascript – 在HTML5中拖动时如何更改光标图标？

当用户拖动DIV(以下示例中为红色div)时,我需要设置光标的图标.

我尝试了几次尝试,包括使用CSS游标：move和event.dataTransfer.dropEffect,没有成功,因为图标总是显示一个“交叉的圆圈”.

任何想法如何解决这个问题使用HTML5拖放API？

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);

}

};