Code666 (代码贴、代码片段)

[JavaScript] JavaScript拖拽网页内元素的代码 →→→→→进入此内容的聊天室

来自 , 2019-06-30, 写在 JavaScript, 查看 112 次.
URL http://www.code666.cn/view/f0282b5f
  1. /**
  2. * 跨平台的事件监听函数
  3. * @param {Node} node 需要监听事件的DOM节点
  4. * @param {String} eventType 需要监听的事件类型
  5. * @param {Function} callback 事件监听回调函数
  6. * @type Function 返回值为函数类型
  7. * @return 返回监听回调函数的引用，用于释放监听
  8. */
  9. function bindEvent(node, eventType, callback) {
  10.     if (node.attachEvent) {
  11.         if (eventType.indexOf('on')) { eventType = 'on' + eventType; }
  12.         node.attachEvent(eventType, callback);
  13.     } else {
  14.         if (!eventType.indexOf('on'))
  15.             eventType = eventType.substring(2, eventType.length);
  16.         node.addEventListener(eventType, callback, false);
  17.     }
  18.     return callback;
  19. }
  20.  
  21. /**
  22. * 跨平台的事件监听卸载函数
  23. * @param {Node} node 需要卸载监听事件的DOM节点
  24. * @param {String} eventType 需要卸载监听的事件类型
  25. * @param {Function} callback 卸载事件监听回调函数
  26. */
  27. function removeEvent(node, eventType, callback) {
  28.     if (node.detachEvent) {
  29.         if (eventType.indexOf('on')) { eventType = 'on' + eventType; }
  30.         node.detachEvent(eventType, callback);
  31.     } else {
  32.         if (!eventType.indexOf('on'))
  33.             eventType = eventType.substring(2, eventType.length);
  34.         node.removeEventListener(eventType, callback, false);
  35.     }
  36. }
  37.  
  38. /**
  39. * 兼容不同定位方式的通用拖动接口
  40. * @param {Node} dragger 需要被拖动的元素
  41. */
  42. //必须告诉系统，哪些元素是可以进行交互，而哪些是不行
  43. function canDrag(dragger) {
  44.     var drag = bindEvent(dragger, 'onmousedown', function(e) {
  45.         //兼容事件对象
  46.         e = e || event;
  47.  
  48.         //兼容坐标属性
  49.         var pageX = e.clientX || e.pageX;
  50.         var pageY = e.clientY || e.pageY;
  51.  
  52.         //兼容样式对象
  53.         var style = dragger.currentStyle || window.getComputedStyle(dragger, null);
  54.         //当没有设置left和top属性时，IE下默认值为auto
  55.         var offX = parseInt(style.left) || 0;
  56.         var offY = parseInt(style.top) || 0;
  57.  
  58.         //获取鼠标相对于元素的间距
  59.         var offXL = pageX - offX;
  60.         var offYL = pageY - offY;
  61.  
  62.         //为dragger增加onDrag属性，用来存储拖动事件
  63.         if (!dragger.onDrag) {
  64.             //监听拖动事件
  65.             dragger.onDrag = bindEvent(document, 'onmousemove', function(e) {
  66.                 e = e || event;
  67.                 var x = e.clientX || e.pageX;
  68.                 var y = e.clientY || e.pageY
  69.                 //设置X坐标
  70.                 dragger.style.left = x - offXL + 'px';
  71.                 //设置Y坐标
  72.                 dragger.style.top = y - offYL + 'px';
  73.             });
  74.  
  75.             //监听拖动结束事件
  76.             dragger.onDragEnd = bindEvent(document, 'onmouseup', function(e) {
  77.                 //释放前读取事件对象
  78.                 var x = e.clientX || e.pageX;
  79.                 var y = e.clientY || e.pageY
  80.  
  81.                 //释放拖动监听和结束监听
  82.                 removeEvent(document, 'onmousemove', dragger.onDrag);
  83.                 removeEvent(document, 'onmouseup', dragger.onDragEnd);
  84.                 try {
  85.                     //删除拖动时所用的属性，兼容FF使用
  86.                     delete dragger.onDrag;
  87.                     delete dragger.onDragEnd;
  88.                 } catch (e) {
  89.                     //删除拖动时所用的属性，兼容IE6使用
  90.                     dragger.removeAttribute('onDrag');
  91.                     dragger.removeAttribute('onDragEnd');
  92.                 }
  93.             });
  94.         }
  95.     });
  96.     return function() {
  97.         //返回一个可以取消拖动功能的函数引用
  98.         //释放拖动监听和结束监听
  99.         removeEvent(document, 'onmousemove', dragger.onDrag);
  100.         removeEvent(document, 'onmouseup', dragger.onDragEnd);
  101.         try {
  102.             //删除拖动时所用的属性，兼容FF使用
  103.             delete dragger.onDrag;
  104.             delete dragger.onDragEnd;
  105.         } catch (e) {
  106.             //删除拖动时所用的属性，兼容IE6使用
  107.             dragger.removeAttribute('onDrag');
  108.             dragger.removeAttribute('onDragEnd');
  109.         }
  110.     }
  111. }
  112. //javascript/6763

回复 "JavaScript拖拽网页内元素的代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666