我有一个拖动UI程序,其中可拖动元素上的鼠标光标在单击时变为一只抓取手。问题是,我允许拖动发生在屏幕上的任何地方,光标在锚标记上改变,等等...我试过$('*').addClass('grabbing'),但它真的很贵。有没有一种简单易行、代码高效的方法来处理这个问题?
$('*').addClass('grabbing')
pb3s4cty1#
在CSS级别执行此操作:
* { cursor: pointer; }
在jquery中做这件事会迫使它迭代dom中的每一个节点并重写它的css类,对于一个很长的文档来说,这是一个巨大的时间浪费。
brccelvz2#
试试这个
$('body').addClass('grabbing');
或
$(document).addClass('grabbing');
//编辑答案
$('body').mousedown(function(e){ $(this).css({'cursor':'pointer'}); }).mouseup(function(e){ $(this).css({'cursor':'auto'}); });
如果你的firebug是开着的,你可以看到body style标签的变化。但是有些是不起作用的。你可以把它作为一个参考,尝试类似的方法得到解决方案。
qlvxas9a3#
我尝试了其中的大部分,但并不是所有的元素都会显示光标,快速而肮脏的方法是迭代整个DOM,并为每个元素设置光标。
document.querySelectorAll('*').forEach(function(node) { node.style.cursor = 'progress'; });
在这里执行 AJAX 或其他什么....然后:
document.querySelectorAll('*').forEach(function(node) { node.style.cursor = 'default'; });
8aqjt8rx4#
虽然这不是对这个问题的直接回答,但我想提醒大家注意,我们可以用不同的方法来解决这个问题。通过在除拖放区之外的所有区域上放置一个空的全屏div,在mousedown事件后激活它。因此,我们可以通过该div的:hover类简单地更改整个屏幕的光标。
mousedown
:hover
ymdaylpp5#
当你需要它的时候,你可以调用一行javascript:
document.body.style.setProperty('cursor', 'pointer');
当您想再次撤消它时,可以执行另一行:
document.body.removeAttribute('style');
gt0wga4j6#
您可以向页面/站点添加新样式表。https://codepen.io/Swell_boy/pen/oNMBbKq
const css = "* { cursor: grabbing !important; }", styletag = document.createElement("style"); styletag.type = "text/css"; if (styletag.styleSheet) { styletag.styleSheet.cssText = css; } else { styletag.appendChild(document.createTextNode(css)); } document.addEventListener("mouseup", function myFunction_Default() { styletag.remove(); }); document.addEventListener("mousedown", function myFunction_Grab() { document.body.appendChild(styletag); });
6条答案
按热度按时间pb3s4cty1#
在CSS级别执行此操作:
在jquery中做这件事会迫使它迭代dom中的每一个节点并重写它的css类,对于一个很长的文档来说,这是一个巨大的时间浪费。
brccelvz2#
试试这个
或
//编辑答案
如果你的firebug是开着的,你可以看到body style标签的变化。但是有些是不起作用的。你可以把它作为一个参考,尝试类似的方法得到解决方案。
qlvxas9a3#
我尝试了其中的大部分,但并不是所有的元素都会显示光标,快速而肮脏的方法是迭代整个DOM,并为每个元素设置光标。
在这里执行 AJAX 或其他什么....然后:
8aqjt8rx4#
虽然这不是对这个问题的直接回答,但我想提醒大家注意,我们可以用不同的方法来解决这个问题。
通过在除拖放区之外的所有区域上放置一个空的全屏div,在
mousedown
事件后激活它。因此,我们可以通过该div的:hover
类简单地更改整个屏幕的光标。ymdaylpp5#
当你需要它的时候,你可以调用一行javascript:
当您想再次撤消它时,可以执行另一行:
gt0wga4j6#
您可以向页面/站点添加新样式表。
https://codepen.io/Swell_boy/pen/oNMBbKq