Web前端中实现一个拖动效果

在原生客户端开发中,窗口拖动是一个比较常用的操作。今天把这个效果在网页客户端中实现以下,文章记录一下效果。

分析梳理

拖动操作主要分为三部分:第一,对着需要拖动的元素按下鼠标,获取要拖动物体的位置;第二,滑动鼠标,注意在滑动鼠标的时候,鼠标一直是处于按下状态的并且元素应该是随着鼠标一起移动;第三,到达目标位置,松开鼠标。

实现

首先,拿到要拖动的物体,并注册鼠标按下事件。当鼠标按下时,开始监听页面的鼠标滑动事件,拿到实时位置坐标。再监听鼠标弹起事件,用来移除之前注册的页面事件,防止物体一直跟随无法停止。

<div id="container">container</div>

Js代码如下

const container = document.querySelector('div#container');
let disX = 0,
    disY = 0;
container.addEventListener('mousedown', ev => {
    disX = ev.clientX - container.offsetLeft;
    disY = ev.clientY - container.offsetTop;
    document.addEventListener('mousemove', mov);
    document.addEventListener('mouseup', up);
})

function mov(ev) {
    var ev = ev || event;
    container.style.left = ev.clientX - disX + 'px';
    container.style.top = ev.clientY - disY + 'px';
}

function up(ev) {
    document.removeEventListener('mousemove', mov);
    document.removeEventListener('mouseup', up);
    container.classList.remove('mov');
}

有兴趣可以自己试一试不注销事件监听会有什么效果。

发布时间:2021-05-06
其他阅读

使用表达式树来提高反射的性能

反射是C#中一种常用的技术,反射提供了动态创建和访问对象的基础,但是反射在带来了极强的灵活性的同时,也带了极大的性能损耗,本文就介绍通过表达式树来提高反射过程中的性能。

查看原文

西华湿地公园

昆明周末好去处。

查看原文

C#应用在Windows实现自启动

本文将讲解 C# 应用在 Windows 系统中通过自动设置注册表的形式的形式实现开机自启动,这也是 Windows 系统推荐的做法。

查看原文

WPF使用云母材质

在最新的Windows 11 OS中,微软为流畅设计(Fluent Design)带来了新的云母材质,云母材质一种不透明的动态效果,微软将其作为Windows 11应用窗体的默认材质。

查看原文

记录中文名WPF应用无法启动

今年开春,突然就收到部分用户反馈软件无法启动的问题,沟通后远程查看发现应用刚启动就直接崩溃了,在Windows的事件查看器可以看到应用的崩溃日志,发现是 ucrtbase.dll 模块崩溃,错误代码 0x0000409

查看原文