gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:51:28 28 4
gpt4 key购买 nike

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

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

这是 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 拖动过程中隐藏或更改鼠标光标?

最佳答案

刚遇到同样的问题。我找到了一个有 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 中...

#drag {cursor: none;}

见 fiddle https://jsfiddle.net/wect6xuy/31/

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

希望对你有帮助

关于jquery - 在 HTML5 拖动期间隐藏/自定义光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31829975/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com