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

问题描述

我想在 HTML5 拖动操作期间自定义鼠标光标，因为将 DragImage 设置为代表被拖动对象的内容是一回事(不是在 IE 中)，但叠加标准鼠标光标通常看起来非常糟糕.当'DragImage'很小并且没有办法控制'DragImage'的不透明度时尤其如此.

I'd like to customize the mouse cursor during a HTML5 drag operation because it's one thing to setDragImage to something representing the object being dragged (not in IE) but it generally looks pretty awful having the standard mouse cursor superimposed. This is especially the case when the 'DragImage' is small and there is no way to control the opacity of the 'DragImage'.

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

I have various CSS cursors specified on the drop target but these get disabled / ignored by both Chrome and Firefox during a drag. This leaves us with the standard unattractive arrow-and-dotted-box.

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

Here's the fiddle: 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 拖动过程中隐藏或更改鼠标光标?

Is there a way to hide or change the mouse cursor during a HTML5 drag?

推荐答案

刚遇到同样的问题.我通过助手找到了一个可行的解决方案.

Just had the same problem. I found a working solution with a helper.

脚本如下:

$('#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...

And this has to be added to your css...

#drag {cursor: none;}

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

请注意，我向库中添加了 jQuery UI.这是我让它运行的唯一方法.

Please note that I added jQuery UI to the libraries. It's the only way I got it running.

希望能帮到你

这篇关于在 HTML5 拖动期间隐藏/自定义光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！