Question

我正在尝试实现＆＃34;伪拖动＆＃34;：拖动元素，但不拖动元素本身，它会更改所需区域中的光标。但不好的是，当鼠标位于所需区域时，光标不会改变。只有在该区域中释放鼠标时才会更改。如果您观看DOM检查器，代码中的会在需要时发生更改，但屏幕上的会发生，只有在您释放鼠标按钮时才会发生更改。我做了一个问题的简短例子：

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Test drag</title>
	<script>
		document.addEventListener('DOMContentLoaded', function (event) {
			var btn = document.querySelector('#btn');
			var to = document.querySelector('#to');
			btn.addEventListener('mousedown', function (event) {
				to.style.cursor='wait';
			});
		});
	</script>
</head>
<body>
	<div id="from">
		<button id='btn'>DRAG ME!</button>
	</div>
	<div id="to" style="height: 150px;background-color: aqua;"></div>
</body>
</html>

＆＃13;

IE11报告了此问题。

所以问题是：当光标被拖动（按下LMB）到所需区域时，有没有办法让光标改变？

Answer 1

有点奇怪，但这应该适用于IE11和Chrome。

＆＃13;

var btn = document.getElementById('btn');
var to = document.getElementById('to');

document.addEventListener('mousedown', function (event) {
  if(event.target.id === 'btn') {
    
    // for Chrome
    to.style.cursor='wait';
    
    // for IE11
    to.classList.add('wait');
    to.focus();
  }
});

document.addEventListener('mouseup', function (event) {
  
  // for Chrome
  to.style.cursor='default';
  
  // for IE11
  to.blur();
  to.classList.remove('wait');
})

＆＃13;

.wait:hover {
  cursor: wait;
}

＆＃13;

<div id="from">
  <button id='btn'>DRAG ME!</button>
</div>
<div id="to" style="height: 150px;background-color: aqua;"></div>

＆＃13;

光标在mousedown和drag上不会改变（IE11）

1 个答案: