在 HTML5 拖动期间隐藏/自定义光标

Question

我想在 HTML5 拖动操作期间自定义鼠标光标，因为将 setDragImage 设置为代表被拖动对象的东西（不在 IE 中）是一回事，但叠加标准鼠标光标通常看起来很糟糕。当“DragImage”很小并且无法控制“DragImage”的不透明度时尤其如此。

我在放置目标上指定了各种 CSS 光标，但在拖动过程中，Chrome 和 Firefox 都会禁用/忽略这些光标。这给我们留下了标准的不吸引人的箭头和虚线框。

这是小提琴：http://jsfiddle.net/MCAU/wect6xuy/8/

这是 HTML：

<img draggable id="i" src="http://icons.iconarchive.com/icons/icons8/windows-8/64/Diy-Paint-Bucket-icon.png"/>

<table>
    <tr>
        <td class="a">Copy</td>
        <td class="b">None</td>
    </tr>
    <tr>
        <td class="c">Move</td>
        <td class="d">Crosshair</td>
    </tr>
</table>

这是 CSS：

td {
    padding: 30px;
    font-size: 2em;
    font-family: arial;
    border: 3px solid white;
    background-color: #eee;
    border-spacing: 10px;
}

.a {    cursor: copy;}
.b {    cursor: none;}
.c {    cursor: move;}
.d {    cursor: crosshair;}

img {
    cursor: move;
    cursor: -moz-grabbing;
}

这是 jQuery：

var i = $('#i');

i.on('dragstart', function(e) {
    e.originalEvent.dataTransfer.setData('text', 'foo');
    e.originalEvent.dataTransfer.setDragImage(this, this.offsetWidth/2, this.offsetHeight/2);
});

$('td').on('dragenter, dragover', function(e) {
   e.preventDefault();
   e.stopPropagation();
    return false;
});

$('td').on('drop', function(e) {
    $(this).append(i);
    e.preventDefault();
});

有没有办法在 HTML5 拖动期间隐藏或更改鼠标光标？

Answer 1

刚刚遇到同样的问题。我找到了一个有帮助的可行解决方案。

这是脚本：

$('#i').draggable({
  helper: function(e) {
    return '<img id="drag" src="http://icons.iconarchive.com/icons/icons8/windows-8/64/Diy-Paint-Bucket-icon.png">';
  }
});

这必须添加到您的 css...

#drag {cursor: none;}

看小提琴 https://jsfiddle.net/wect6xuy/31/

请注意，我将 jQuery UI 添加到库中。这是我让它运行的唯一方法。

希望对你有帮助