var DragDrop = function () {

                 var dragging = null;

                 var diffX = 0;

                 var diffY = 0;

                 function handleEvent(event) {

                     event = EventUtil.getEvent(event);

                     var target = EventUtil.getTarget(event);

                     switch (event.type) {

                         case "mousedown":

                             if (target.className.indexOf("draggable") > -1) {

                                 dragging = target;

                                 diffX = event.clientX - target.offsetLeft;

                                 diffY = event.clientY - target.offsetTop;

                             }

                             break;

                         case "mousemove":

                             if (dragging !== null) {

                                 dragging.style.left = (event.clientX - diffX) + "px";

                                 dragging.style.top = (event.clientY - diffY) + "px";

                             }

                             break;

                         case "mouseup":

                             dragging = null;

                             break;

                     }

                 }

                 return {

                 enable : function () {

                     EventUtil.addHandler(document, "mousedown", handleEvent);

                     EventUtil.addHandler(document, "mousemove", handleEvent);

                     EventUtil.addHandler(document, "mouseup", handleEvent);

                 },

                 disable : function () {

                     EventUtil.addHandler(document, "mousedown", handleEvent);

                     EventUtil.addHandler(document, "mousemove", handleEvent);

                     EventUtil.addHandler(document, "mouseup", handleEvent);

                 }

                 }

             } ();

           window.onload = function () {

                 DragDrop.enable(); DragDrop.disable();

             }
 <body>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:0px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:200px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:500px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:800px"></div>

 </body>

比较有意思的原生态js拖拽写法----摘自javascript高级程序设计3的更多相关文章

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

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

  2. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  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. PyQt5编程:鼠标事件

    参考链接:https://www.cnblogs.com/zhuluqing/p/9028816.html 一.每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件 ...

  2. 简单的C#爬虫

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  3. C语言基础:指针初级(补充) 分类： iOS学习 c语言基础 2015-06-10 21:54 19人阅读 评论(0) 收藏

    结构体指针:指向结构体指针的变量的指针. 结构体指针指向结构体第一个成员变量的首地址 ->:   指向操作符 定义的指针变量必须指向结构体的首地址,才可以使用  ->  访问结构体成员变量 ...

  4. 【ssm】拦截器的原理及实现

    一.背景: 走过了双11,我们又迎来了黑色星期五,刚过了黑五,双12又将到来.不管剁手的没有剁手的,估计这次都要剁手了!虽然作为程序猿的我,没有钱但是我们长眼睛了,我们关注到的是我们天猫.淘宝.支付宝 ...

  5. 【opencv基础】linux系统opencv以及opencv_contrib的安装与使用

    前言 本文主要介绍如何在linux系统安装使用opencv. 具体步骤可参考opencv官网here. 步骤 编译源码之前需要安装相关依赖库: 1.下载源码: 2.解压源码: 3.配置cmake: 注 ...

  6. Springboot中的连接池

    pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-ja ...

  7. CodeForces - 140E：New Year Garland （组合数&&DP）

    As Gerald, Alexander, Sergey and Gennady are already busy with the usual New Year chores, Edward has ...

  8. CSU 1112: 机器人的指令

    1112: 机器人的指令 Submit Page          Description 数轴原点有一个机器人.该机器人将执行一系列指令,你的任务是预测所有指令执行完毕之后它的位置. ·LEFT:往 ...

  9. Python学习-终端字体高亮显示

    1.采用原生转义字符序列,对Windows有的版本不支持(比如win7),完美支持Linux 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以 ...

  10. set 与 map 的第一次尝试

    map 杭电6015http://acm.hdu.edu.cn/showproblem.php?pid=6015 基本用法:map<string,int>mp;   mp[class[ i ...