let isDragging = false; // 标记是否正在拖动
let dragTrack = []; // 用于存储拖动路径的数组
document.addEventListener('mousedown', (event) => {
isDragging = true; // 当鼠标按下时,开始拖动
const timeStamp = Date.now();
dragTrack = [{x: event.clientX, y: event.clientY,time: timeStamp}]; // 初始化轨迹数组并记录起始点
console.log('down', {x: event.clientX, y: event.clientY,time: timeStamp})
});
document.addEventListener('mousemove', (event) => {
if (isDragging) {
// 如果正在拖动,记录当前鼠标位置
const timeStamp = Date.now();
dragTrack.push({x: event.clientX, y: event.clientY, time: timeStamp});
console.log('move', {x: event.clientX, y: event.clientY,time: timeStamp})
}
});
document.addEventListener('mouseup', (event) => {
if (isDragging) {
isDragging = false; // 停止拖动
const timeStamp = Date.now();
dragTrack.push({x: event.clientX, y: event.clientY, time: timeStamp}); // 记录最后一个点
console.log('up', {x: event.clientX, y: event.clientY,time: timeStamp})
console.log('拖动轨迹:', dragTrack); // 输出或处理拖动轨迹
// 在这里可以调用一个函数来处理或者展示拖动轨迹,例如绘制轨迹
}
});
网友评论