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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js 小数取整的函数
May 10 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
vue自动化表单实例分析
May 06 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
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
sphinx增量索引的一个问题
2011/06/14 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
Python编写登陆接口的方法
2017/07/10 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python实现海螺图片的方法示例
2019/05/12 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python输出数学符号实例
2020/05/11 Python
python中sys模块是做什么用的
2020/08/16 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
高三语文复习计划
2015/01/19 职场文书
八年级数学教学反思
2016/02/17 职场文书
2019年大学推荐信
2019/06/24 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python