https://blog.csdn.net/u013040887/article/details/83059094

权侵删

这里写的是一个原生js实现拖拽的效果，首先：

1、实现拖拽的三大事件，是要首先清楚的

onmousedown （鼠标按下的时候）、onmousemove（鼠标移动的时候）、onmouseup（鼠标松开的时候）

2、给目标元素加上onmousedown时间，记录鼠标按下的时候，鼠标距离所在元素的位置（就是鼠标距离所在元素边界的距离left、top）记录为disX、disY。要注意的是，要移动的是这个元素，就要算出鼠标坐标与这个元素边界的距离，拖动过程中，鼠标与元素边界位置距离是不变的。

3、当onmousedown发生后，给document添加onmousemove事件，可以根据一下公司不断刷新目标元素的实时位置
---------------------

目标元素.left = oEvent。clientX - disX + 'px';

目标元素.top = oEvent .clientY - disY + 'px';

4、在onmousemove完成后，给document再添加omouseup时间，取消document的onmousemove时间

过程就是以上3个步骤，直接看原理也许晦涩难懂，这里就用代码来直接显示吧；

var obox = document.getElementById('drag')

//1、给需要移动的元素添加onmousedown事件,给拖动做好准备

obox.onmousedown = function(evt) {

    var oEvent = evt || event; //获取事件对象，这个是兼容写法

    var disX = oEvent.clientX - parseInt(obox.style.left);

    var disY = oEvent.clientY - parseInt(obox.style.top);

    //这里就解释为什么要给document添加onmousemove时间，原因是如果你给obox添加这个事件的时候，当你拖动很快的时候就很快脱离这个onmousemove事件，而不能实时拖动它

    document.onmousemove = function(evt) { //实时改变目标元素obox的位置

            var oEvent = evt || event;

            obox.style.left = oEvent.clientX - disX + 'px';

            obox.style.top = oEvent.clientY - disY + 'px';

        }

        //停止拖动

    document.onmouseup = function() {

        document.onmousemove = null;

        document.onmouseup = null;

    }

}

上面是就实现拖拽的原理；还有一些原理不清楚就是clientX这些距离问题，我这里用一张图来表示吧

(粗略说一下就是 clientXY就是鼠标的坐标 不考虑页面滚动 disXY就是物体和鼠标之间的距离 offsetLeft和style.left某种程度上一样 就是物体的宽度高度距离父辈的左右距离)

(oEvent=ev||event ev是系统传递过来的变量 前面是考虑到了兼容性的问题 )

在拖拽的过程中，每次都要算出这个top，left只也是很麻烦，在js有几个很好用的属性：

offsetLeft：相对参照物的左边距离
offsetTop：相对参照物的上边距离（就如box.offsetTop，就是相对于父元素上边边距的距离）
offsetWidth：元素节点的宽度（相对于width，但是没有单位）
offsetHeight：元素节点的高度
offsetX：事件对象的属性，用这个属性，就可以不用计算鼠标距离所在元素边界的距离disX的值了，可以直接disX = oEvent.offsetX;得到
offsetY：事件对象的属性，同理offsetX；
offsetParent：参照物父元素
这里要注意的是，offsetLeft / offsetTop 都是只读的

4.clientX 事件属性返回 当事件被触发时 鼠标指针相对于浏览器页面（或客户区）的水平坐标。(相对于页面  不考虑滚动条是否滚动)

5.拖拽时限制条件：

LimitDrag.prototype.fnMove=function (ev){ //继承方法用prototype

     var oEvent=ev||event;

     var l=oEvent.clientX-this.disX;

     var t=oEvent.clientY-this.disY;

     if(l<0){ //clientX是此时鼠标的X坐标  disX就是鼠标和div之间(x)的距离 二者一减就是此时div的X坐标

         l=0;

     }

     if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){ //这是她能靠到的最右的距离

//document.documentElement.clientWidth就是可视窗的整个宽度 offsetWidth就是div的宽度 二者一减就是当DIV挨着右窗口时的距离

         l=document.documentElement.clientWidth-this.oDiv.offsetWidth;

     }

     this.oDiv.style.left=l+'px';

     this.oDiv.style.top=t+'px';

}

拖拽 面向对象形式

<!DOCTYPE html>

<html>

<head>

<meta  charset="utf-8">

<title>diyici</title>

<style>

#div1{ width:200px; height:200px; background:yellow; position:absolute;}

</style>

<script>

window.onload=function(){

    new Drag('div1');

}

function Drag(id){

    var _this=this;

    this.disX=0;

    this.disY=0;

    this.oDiv=document.getElementById(id);

    this.oDiv.onmousedown=function (ev){

            _this.fnDown(ev);

    }

}

Drag.prototype.fnDown=function (ev){

        var _this=this;

        var oEvent=ev||event;

         this.disX=oEvent.clientX-this.oDiv.offsetLeft;

         this.disY=oEvent.clientY-this.oDiv.offsetTop;

        document.onmousemove=function (ev){

             _this.fnMove(ev);

        }

        document.onmouseup=function (){

            _this.fnUp();

        }

}

Drag.prototype.fnMove=function (ev){

        var _this=this;

        var oEvent=ev||event;

        this.oDiv.style.left=oEvent.clientX-this.disX+'px';

        this.oDiv.style.top=oEvent.clientY-this.disY+'px';

}

Drag.prototype.fnUp=function (){

        document.onmousemove=null;

        document.onmouseup=null;

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

[转自大神]js拖拽小总结的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. jQuery UI API - 可拖拽小部件（Draggable Widget）(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  6. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  7. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  8. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  9. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

随机推荐

  1. 图论(最短路&最小生成树)

    图论 图的定义与概念 图的分类 图,根据点数和边数可分为三种:完全图,稠密图与稀疏图. 完全图,即\(m=n^2\)的图\((m\)为边数,\(n\)为点数\()\).如: 1 1 0 1 2 1 1 ...

  2. Mysql注入小tips --持续更新中

    学习Web安全好几年了,接触最多的是Sql注入,一直最不熟悉的也是Sql注入.OWASP中,Sql注入危害绝对是Top1.花了一点时间研究了下Mysql类型的注入. 文章中的tips将会持续更新,先说 ...

  3. plink合并文件并更新SNP位置（merge file, update SNP position）

    一.合并文件 plink合并文件需要用到“merge”参数 如果是ped和map格式文件,则用以下命令: plink --file data1 --merge data2.ped data2.map ...

  4. linux device drivers ch02

    ch02.构造和运行模块 模块的构造: #include <linux/init.h> #include <linux/module.h> MODULE_LICENSE(&qu ...

  5. React 记录(7)

    React文档:https://www.reactjscn.com/docs/handling-events.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...

  6. Linux负载查询定位工具

    1 uptime命令,负载查询命令 02:34:03 // 当前时间up 2 days, 20:14 // 系统运行时间1 user // 正在登录用户数 而最后三个数字呢,依次则是过去 1 分钟.5 ...

  7. Rich feature hierarchies for accurate object detection and semantic segmentation（理解）

    0 - 背景 该论文是2014年CVPR的经典论文,其提出的模型称为R-CNN(Regions with Convolutional Neural Network Features),曾经是物体检测领 ...

  8. 软件测试之adb命令-实际公司使用场景--今日log

    软件测试之adb命令-实际公司使用场景--今日log Dotest-董浩整理 1)可以看内存泄漏: 2)可以安装.卸载app--截图并提交bug: 3)可以通过抓app日志定位问题: 4)可以结合mo ...

  9. 【转】Python3 (入门6) 库的打包与安装

    Python3 (入门6) 库的打包与安装 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.csdn.net/Rozol/article/details/6940288 ...

  10. Tomcat zabbix监控、jmx监控、zabbix_java_gateway

    几种方式监控tomcat,如标题. 下面就是参考的网上的连接.自己可以试一下. 由于牵扯到jvm的很多东西, 在这里就只是粘贴处连接参考. http://www.cnblogs.com/chrisDu ...