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
其他阅读

WPF中CornerRadius是什么属性

在WPF中,CornerRadius 属性我们经常需要使用到,它的作用是用来设置控件的四个圆角,在 BorderButton 等控件中使用。等同于 css 中的 border-radius 设置。

查看原文

HTTP状态码

HTTP状态码为客户端提供了一种理解事务处理结果的边界方式。本文列出一些原因短语,所使用的是HTTP/1.1规范所定义的。

查看原文

LinqPad 8 分享下载

LinqPad是一个 .Net 快速验证工具,使得.Net开发者可以不借助 Visual Studio 就可以快速验证想法,毕竟vs冷启动和创建项目耗时久,负担大。本文分享一个LinqPad学习版,可直接下载使用。

查看原文

Angular 中跨分模块后路由复用问题

当我们的 Angular 应用越来越大后,就需要考虑使用模块或者直接使用库来将解体应用,使用时进来懒加载,加快访问速度。当跨分模块后,普通的路由复用策略就是失效,需要额外的解决方法。

查看原文

Nginx重定向HTTP到HTTPS

HTTP协议以纯文本形式进行数据的交互,数据明文传输,容易被监听,窃取和伪造,HTTPS在HTTP的基础上,使用了TLS/SSL对通信过程进行加密,数据得到了有效的保护,就算被拦截到也无法获取信息,更没法实施中间人攻击。本文将会介绍如何在Nginx中配置HTTP重定向到HTTPS。

查看原文