JavaScript实现拖拽网页内元素的方法


Posted in Javascript onApril 15, 2015

本文实例讲述了JavaScript实现拖拽网页内元素的方法。分享给大家供大家参考。具体如下:

这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴。

/**
* 跨平台的事件监听函数
* @param {Node} node 需要监听事件的DOM节点
* @param {String} eventType 需要监听的事件类型
* @param {Function} callback 事件监听回调函数
* @type Function 返回值为函数类型
* @return 返回监听回调函数的引用,用于释放监听
*/
function bindEvent(node, eventType, callback) {
 if (node.attachEvent) {
  if (eventType.indexOf('on')) { eventType = 'on' + eventType;}
  node.attachEvent(eventType, callback);
 } else {
  if (!eventType.indexOf('on'))
   eventType = eventType.substring(2, eventType.length);
  node.addEventListener(eventType, callback, false);
 }
 return callback;
}
/**
* 跨平台的事件监听卸载函数
* @param {Node} node 需要卸载监听事件的DOM节点
* @param {String} eventType 需要卸载监听的事件类型
* @param {Function} callback 卸载事件监听回调函数
*/
function removeEvent(node, eventType, callback) {
 if (node.detachEvent) {
  if (eventType.indexOf('on')) { eventType = 'on' + eventType;}
  node.detachEvent(eventType, callback);
 } else {
  if (!eventType.indexOf('on'))
   eventType = eventType.substring(2, eventType.length);
  node.removeEventListener(eventType, callback, false);
 }
}
/**
* 兼容不同定位方式的通用拖动接口
* @param {Node} dragger 需要被拖动的元素
*/
//必须告诉系统,哪些元素是可以进行交互,而哪些是不行
function canDrag(dragger) {
 var drag = bindEvent(dragger,'onmousedown',function(e){
  //兼容事件对象
  e = e || event;
  //兼容坐标属性
  var pageX = e.clientX || e.pageX;
  var pageY = e.clientY || e.pageY;
  //兼容样式对象
  var style = dragger.currentStyle || window.getComputedStyle(dragger,null);
  //当没有设置left和top属性时,IE下默认值为auto
  var offX = parseInt(style.left) || 0;
  var offY = parseInt(style.top) || 0;
  //获取鼠标相对于元素的间距
  var offXL = pageX - offX;
  var offYL = pageY - offY;
  //为dragger增加onDrag属性,用来存储拖动事件
  if (!dragger.onDrag) {
   //监听拖动事件
   dragger.onDrag = bindEvent(document,'onmousemove',function(e){
    e = e || event;
    var x = e.clientX || e.pageX;
    var y = e.clientY || e.pageY
    //设置X坐标
    dragger.style.left = x - offXL + 'px';
    //设置Y坐标
    dragger.style.top = y - offYL + 'px';
   });
   //监听拖动结束事件
   dragger.onDragEnd = bindEvent(document,'onmouseup',function(e){
    //释放前读取事件对象
    var x = e.clientX || e.pageX;
    var y = e.clientY || e.pageY
    //释放拖动监听和结束监听
    removeEvent(document, 'onmousemove', dragger.onDrag);
    removeEvent(document, 'onmouseup', dragger.onDragEnd);
    try {
     //删除拖动时所用的属性,兼容FF使用
     delete dragger.onDrag;
     delete dragger.onDragEnd;
    } catch (e) {
     //删除拖动时所用的属性,兼容IE6使用
     dragger.removeAttribute('onDrag');
     dragger.removeAttribute('onDragEnd');
    }
   });
  }
 });
 return function() {
  //返回一个可以取消拖动功能的函数引用
  //释放拖动监听和结束监听
  removeEvent(document, 'onmousemove', dragger.onDrag);
  removeEvent(document, 'onmouseup', dragger.onDragEnd);
  try {
   //删除拖动时所用的属性,兼容FF使用
   delete dragger.onDrag;
   delete dragger.onDragEnd;
  } catch (e) {
   //删除拖动时所用的属性,兼容IE6使用
   dragger.removeAttribute('onDrag');
   dragger.removeAttribute('onDragEnd');
  }
 }
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery+html5实现div弹出层并遮罩背景
Apr 15 #Javascript
jquery实现简单的无缝滚动
Apr 15 #Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 #Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 #Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
详解vue中组件参数
2018/07/09 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
小学生成长感言
2014/01/30 职场文书
保密工作实施方案
2014/02/24 职场文书
财产公证书样本
2014/04/04 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书