69

我想知道如何在拖动（dragover/dragenter）图标/光标时进行更改，例如当我拖动输入以拒绝或允许部分时。当然，我可以用光标移动绝对定位的 DOM 的一部分，但我对原生 HTML5 解决方案感兴趣。

谢谢！

4

6 回答 6

39

你在dropEffect之后：

在 dragstart 中初始化它：

event.dataTransfer.effectAllowed = "copyMove";

在 dragenter 中更新它：

event.dataTransfer.dropEffect = "copy";
于 2012-05-14T19:36:36.333 回答
12

我在这里有一个独立的跨浏览器 HTML5 拖放示例：http: //jsfiddle.net/rvRhM/1/

查看 dragstart 和 dragend 事件。dm是被拖动的元素。

EventUtil.addHandler(dm, 'dragstart', function(e) {
    e.dataTransfer.setData(format, 'Dragme');
    e.dataTransfer.effectAllowed = effect;
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = 'blue';
    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
});

确保拖动结束时重置光标：

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});
于 2012-04-12T07:59:20.250 回答
3

添加纯 css 解决方案，这可能对少数人有用。在 html 元素上使用此类。

.grab {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        .thumbnails-list{
            cursor: pointer;
        }
    }

    .grab:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }
于 2018-02-15T00:30:40.473 回答
2

我试图达到同样的效果，但找不到一个好的解决方案。我最终所做的是将图像设置为 dataTransfer 并在每次操作时更改其 src。这样，至少跨浏览器的行为是一致的。这是我用作参考的页面的链接：

https://kryogenix.org/code/browser/custom-drag-image.html

于 2017-05-09T17:11:07.657 回答
1

当且仅当在 MDN中描述的ev.preventDefault()所有更改dropEffect（不要调用它）的事件上调用时，接受的答案才有效dragstart

于 2021-10-11T10:08:46.013 回答
0

这对我有用：

<div class="container">
    <div draggable="true">
    <div draggable="true">
</div>

$('.container').bind('dragover', function() {
    $('body').addClass('dragging');
});
$('.container').bind('dragleave', function() {
    $('body').removeClass('dragging');
});

.container > div {
    cursor: grab;
}
body.dragging .container > div {
    cursor: grabbing;
}

https://jsfiddle.net/cLb3hxtf/1/

于 2019-12-08T17:38:36.417 回答