在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