元素事件：鼠标按下事件/鼠标移动事件/鼠标松开事件

元素样式：让元素脱离文档流，采用绝对定位的方式。

一、鼠标按下事件

当鼠标在元素上面按下时，保存元素的初始偏移量和鼠标按下时的坐标，然后在状态变量里面标记当前状态为按下状态。

二、鼠标移动事件

当鼠标拖动元素移动时，我们通过计算鼠标从起始位到移动位之间的偏移量来求元素应该移动的距离。

元素移动距离= 初始坐标 + (鼠标拖动坐标 - 鼠标按下坐标 )

三、鼠标松开事件

当鼠标松开后，我们把状态变量重置为假，表示当前拖动结束。

HTML代码：

<!DOCTYPE html>

<head>

    <meta charset="utf8">

    <title>js拖动效果</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="node.js"></script>

</head>

<body>

    <div id="drag">拖动我！</div>

    <script>

        let o = document.querySelector("#drag");

        let e = new NodeElement(o);

        e.draggable();

    </script>

</body>

</html>

CSS代码：

#drag{

    width: 100px;

    height: 100px;

    background: red;

    position:absolute;

    cursor: move;

    line-height: 100px;

    text-align: center;

}

JS脚本代码：

'use strict';

/** 私有属性 */

const _nodexy = Symbol('_nodexy');   // 节点坐标

const _startxy = Symbol('_startxy');    // 起始坐标

const _mousedown = Symbol('_mousedown'); // 判断鼠标是否按下

/**

 * 节点元素类

 */

class NodeElement {

    /**

     * 构造函数

     * @param {HTMLElement} element

     */

    constructor(element) {

        this.element = element;

        this[_nodexy] = [0, 0]; // 节点坐标

        this[_mousedown] = false;  // 判断鼠标是否按下

        this[_startxy] = [0, 0]; // 起始坐标

    }

    /**

     * 拖动

     */

    draggable() {

        // 按下事件

        this.element.addEventListener("mousedown", (event) => {

            this[_mousedown] = true;

            this[_startxy] = [event.clientX, event.clientY];

            this[_nodexy] = [this.element.offsetLeft, this.element.offsetTop];

        });

        // 移动

        document.addEventListener("mousemove", (event) => {

            // 计算元素移动距离

            // 元素移动距离= 初始坐标 + (鼠标拖动坐标 - 鼠标按下坐标 )

            // 事件： 按下事件（开始） / 鼠标移动事件（进行中） / 鼠标松开事件（结束）

            if (this[_mousedown]) {

                this.element.style.left = this[_nodexy][0] + (event.clientX - this[_startxy][0]) + 'px';

                this.element.style.top = this[_nodexy][1] + (event.clientY - this[_startxy][1]) + 'px';

            }

        });

        // 松开

        this.element.addEventListener("mouseup", (event) => {

            this[_mousedown] = false;

        });

    }

}

我的百度经验：https://jingyan.baidu.com/article/546ae185f7c0711149f28c34.html

源码地址：https://pan.baidu.com/s/19t_QUqw_UhceqWT1nwgBxw

样本地址：http://js.zhuamimi.cn/%E5%85%83%E7%B4%A0%E6%8B%96%E5%8A%A8/index.htm

js/es6 元素拖动的更多相关文章

  1. JS实现元素拖动

    实现1 参考文献:http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html 1.1 拖放效果 <!DOCTYPE html P ...

  2. 实现dom元素拖动

    本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之. 主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解. <!DOCTYPE html> <ht ...

  3. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  4. JavaScript事件模拟元素拖动

    一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...

  5. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  6. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  7. paip.调试js 查看元素事件以及事件断点

    paip.调试js  查看元素事件以及事件断点 ff 26 +firebug 查看不出来.. 360 ,虽然也是chrome 基础,但是开发工具烂阿,也是显示不出来.. 作者Attilax  艾龙,  ...

  8. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  9. JavaScript实现元素拖动性能优化

    前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...

随机推荐

  1. 【高速接口-RapidIO】1、RapidIO协议概述

    一.RapidIO背景介绍 RapidIO是由Motorola和Mercury等公司率先倡导的一种高性能. 低引脚数. 基于数据包交换的互连体系结构,是为满足和未来高性能嵌入式系统需求而设计的一种开放 ...

  2. git常用命令速查:创建,修改提交,撤销,切换分支,合并分支,变基解决冲突

    创建 $ git init  #在当前目录下创建一个空的本地仓库 $ rm -rf  .git  #删除本地仓库 $ git add .  #把当前目录下的所有文件添加到暂存区 $ git commi ...

  3. Oneinstack 环境安装 Flarum 轻量级论坛程序

    之前做了个论坛,使用的是discuz框架,虽然这个框架已经很成熟,功能也相对较多,但毕竟老框架了,今天尝试用Flarum来搭建一个论坛,Flarum相对来说美观而且速度快 系统环境使用oneinsta ...

  4. node.js使用免费的阿里云ip查询获取ip所在地

    在项目过程中,我们常常需要获取IP的所在地.而这一功能一般都是通过一些数据网站的对外接口来实现,这些接口一般情况下都是付费使用的.在这篇文章中我将记录,基于node.js的阿里云免费IP地址查询接口的 ...

  5. 微信小程序web-view实例

    微信小程序web-view实例 index.js //index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { }, ...

  6. 《http权威指南》读书笔记13

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  7. SVG之颜色、渐变和笔刷的使用

    一.颜色 我们之前使用英文来表示颜色并进行填充,比如: <circle cx="800" cy="120" r="110" strok ...

  8. Metasploit Framework（6）客户端渗透（上）

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 前五篇文章讲解了Metasploit Framewor ...

  9. Linux的 Shell 理解和使用

    Shell为命令解释器,把用户命令解释为内核可识别的机器语言,然后翻译命令结果给用户,其也是一个强大的编程语言,是解释执行的脚本语言,无编译,与python机制基本相同. Shell内部可以直接调用L ...

  10. 一文总结 Linux 虚拟网络设备 eth, tap/tun, veth-pair

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Linux 虚 ...