在HTML5中拖动时如何更改光标图标？

Question

我需要在用户拖动DIV时设置光标图标（以下示例中为红色div）。

我尝试了几次尝试，包括使用CSS cursor:move和event.dataTransfer.dropEffect没有成功，因为图标总是显示“交叉圆圈”。

有关如何使用HTML5拖放API解决此问题的任何想法？

 <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

使用mousedown和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

添加event.dataTransfer.setData(); 应该解决问题。 一旦元素被识别为可拖动，浏览器将在您拖动后自动添加移动光标。 当然，您必须删除所有其他cursor: move声明以在拖动时查看光标更改。

最小的例子：

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

如果您仍想更改图标（例如，使用自定义拖动图标），则可以使用event.target.style.cursor访问元素样式。

有关详细信息，请参阅MDN拖放和MDN推荐的拖动类型

Answer 3

你真的需要 Drag API吗？ 我发现我使用的是Drag API，因为我在鼠标事件的可靠性方面遇到了麻烦（ mouseups没有捕获鼠标）。

Drag API仅用于拖放功能，如果您只是摆弄点击和指向事件的可靠性， .setPointerCapture使用新的API .setPointerCapture来更有效地处理这些情况。 这是实现这一目标的最小可行方法：

el.onpointerdown = ev => {
    el.onpointermove = pointerMove 
    el.setPointerCapture(ev.pointerId)
}

pointerMove = ev => {
    console.log('Dragged!')
}

el.onpointerUp = ev => {
    el.onpointermove = null
    el.releasePointerCapture(ev.pointerId)
}

非常漂亮，您将完全控制光标的显示样式。

Answer 4

我不关心特定的光标，我只是想摆脱“交叉圆圈”之一。 我的解决方案是将dragover事件（具有以下功能）包含在已经有dragenter，dragstart和dragend事件的所有元素中。

function dragover(event)
{
    event.dataTransfer.dropEffect = "move";
    event.preventDefault();
}

在HTML5中拖动时如何更改光标图标？

问题描述

4 个解决方案

解决方案1
7 已采纳 2016-06-10 05:20:53

解决方案2
2 2015-05-06 00:18:08

解决方案3
0 2019-03-22 08:22:05

解决方案4
0 2019-06-21 08:50:27

在HTML5中拖动时如何更改光标图标？

问题描述

4 个解决方案

解决方案1 7 已采纳 2016-06-10 05:20:53

解决方案2 2 2015-05-06 00:18:08

解决方案3 0 2019-03-22 08:22:05

解决方案4 0 2019-06-21 08:50:27

解决方案1
7 已采纳 2016-06-10 05:20:53

解决方案2
2 2015-05-06 00:18:08

解决方案3
0 2019-03-22 08:22:05

解决方案4
0 2019-06-21 08:50:27