JavaScript实现简单的拖动效果


Posted in Javascript onJuly 02, 2016

拖动是一件非常酷的事情。你点击某个对象,并按住鼠标不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象放在这里。
下面是一个简单的案例:
HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute;

<div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div>

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

JS部分(dome.js):

var EventUtil = {
  // 获取事件和目标
  getEvent : function (event) {
    return event ? event : window.event;
  },
  getTarget : function (event) {
    return event.target || event.srcElement;
  },
  // 添加监听事件
  addEvent : function (element, type, handler) {
    if (element.addEventListener)
    {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent)
    {
      element.attachEvent("on" + type, handler);
    }
  },
  // 注销监听事件
  delEvent : function (element, type, handler) {
    if (element.removeEventListener)
    {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent)
    {
      element.detachEvent("on" + type, handler);
    }
  }
}
var DragDrop = function () {
  // 判断DOM元素是否正在被拖动的标志
  var dragging = null;
  // DOM元素左上角与鼠标指针的差值
    diffX = 0;
    diffY = 0;
  function handleEvent(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch (event.type) {
      case "mousedown" : 
      // 判断DOM元素的class中是否含有draggable属性
        if (target.className.indexOf("draggable") > -1) {
          dragging = target;
          diffX = event.clientX - target.offsetLeft;
          diffY = event.clientY - target.offsetTop;
        }
      break;

      case "mousemove" : 
        if (dragging != null) {
          target.style.left = event.clientX - diffX + "px";
          target.style.top = event.clientY - diffY + "px";
        }
      break;

      case "mouseup" :
        dragging = null;
      break;

    }
  }
  return {
    enable : function () {
      EventUtil.addEvent(document, "mousedown", handleEvent);
      EventUtil.addEvent(document, "mousemove", handleEvent);
      EventUtil.addEvent(document, "mouseup", handleEvent);
    },
    disable : function () {
      EventUtil.delEvent(document, "mousedown", handleEvent);
      EventUtil.delEvent(document, "mousemove", handleEvent);
      EventUtil.delEvent(document, "mouseup", handleEvent);
    }
  }
}();
DragDrop.enable();

这里需要讲解的是diffX和diffY,它们表示元素左上角与鼠标指针的差值。
diffX = 鼠标的x坐标 - 元素对象的offsetLeft
diffY = 鼠标的y坐标 - 元素对象的offsetTop

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
JS的replace方法介绍
Oct 20 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
You might like
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP实现小偷程序实例
2016/10/31 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
详解Python文本操作相关模块
2017/06/22 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python中logging包的使用总结
2018/02/28 Python
python opencv摄像头的简单应用
2019/06/06 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python将字典转换为XML的方法
2020/08/01 Python
python 5个实用的技巧
2020/09/27 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
债务纠纷代理词
2015/05/25 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技