學習筆記：滑鼠拖拽優化

滑鼠(配件) · 發表 2018-09-29 19:12:56

摘要：前言之前在給一個元素新增拖拽的時候碰到如下問題: 在快速移動的時候,移動的元素沒有跟隨滑鼠快速移動原因出現這個問題的原因是 mousemove 事件觸發是有一個時間間隔的,比如每隔50ms(不一定是,只是假如)瀏覽器才會去獲取一次滑鼠當前的位置,觸發mousemove事件並把...

前言

之前在給一個元素新增拖拽的時候碰到如下問題: 在快速移動的時候,移動的元素沒有跟隨滑鼠快速移動

原因

出現這個問題的原因是 mousemove 事件觸發是有一個時間間隔的,比如每隔50ms(不一定是,只是假如)瀏覽器才會去獲取一次滑鼠當前的位置,觸發mousemove事件並把當前滑鼠資訊傳入回撥函式中,所以當我們快速移動的時候在下一次檢測之前, 我們的滑鼠有可能已經移動出元素,這樣就導致元素上繫結的滑鼠事件不能正確執行.

解決辦法

那怎麼解決這個辦法呢? 我們只需要把滑鼠事件的mousedown事件繫結在元素上,然後把mousemove和mouseup事件繫結在document就可以了, 因為不管你如何快速移動,滑鼠一直是在document上的

示例程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
.block{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
cursor: move;
}
</style>
</head>

<body>
<div class="block"></div>
</body>
<script type="text/javascript">
var block = document.querySelector('.block');
block.addEventListener('mousedown', moveStart);
document.addEventListener('mousemove', moving);
document.addEventListener('mouseup', moveEnd);

var isDrap = false;
var position = {
x: 0,
y: 0
};
var start = {
x: 0,
y: 0
};
function moveStart(e) {
isDrap = true;
start.x = e.pageX;
start.y = e.pageY;
}
function moving(e) {
if (!isDrap) return;
let move = {
x: e.pageX - start.x,
y: e.pageY - start.y,
}
block.style.left = (position.x + move.x) + 'px';
block.style.top = (position.y + move.y) + 'px';
}
function moveEnd(e) {
isDrap = false;
position = {
x: block.offsetLeft,
y: block.offsetTop
}
}
</script>
</body>
</html>

學習筆記：滑鼠拖拽優化

前言

原因

解決辦法

示例程式碼

您可能也會喜歡…