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 相关文章推荐
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
PHP 实现链式操作
2021/03/09 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python restful框架接口开发实现
2020/04/13 Python
Python基于locals返回作用域字典
2020/10/17 Python
python绘图模块之利用turtle画图
2021/02/12 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
六一儿童节主持词
2014/03/21 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
房屋继承公证书
2014/04/10 职场文书
护士2014年终工作总结
2014/11/11 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python