javascript 公用拖拽类代码

D类

html, body {
margin:0;
}

!!window.__defineGetter__ && !/MSIE/.test(navigator.userAgent) && function () {
!window.opera && window.__defineGetter__('event', function () {
//兼容Event对象
var o = arguments.callee;
do {
if (o.arguments[0] instanceof Event) return o.arguments[0];
} while (o = o.caller);
return null;
});

window.attachEvent = Document.prototype.attachEvent = Element.prototype.attachEvent = function (type, listener, capture) {
//兼容attachEvent方法
return this.addEventListener(new String(type).substr(2), listener, capture || false);
};

window.detachEvent = Document.prototype.detachEvent = Element.prototype.detachEvent = function (type, listener, capture) {
//兼容detachEvent方法
return this.removeEventListener(new String(type).substr(2), listener, capture || false);
};

}();
var D = {
//拽补助类
lock : false

, dom : function () {
//document相关属性
return {
left : document.documentElement.scrollLeft
, top : document.documentElement.scrollTop
, width : document.documentElement.clientWidth
, height : document.documentElement.clientHeight
, body : document.documentElement
};
}

, mos : function (e) {
//获取鼠标绝对位置
var dom = this.dom();

return { 'x' : dom.left + e.clientX, 'y' : dom.top + e.clientY }
}

, pos : function (o) {
//获取元素绝对位置
var x = 0, y = 0;
do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
return { 'x' : x, 'y' : y };
}

, start : function (element, startEventHandler, moveEventHandler, stopEventHandler) {
//移动开始
if (this.lock) return;
else this.lock = true; //先上锁安全。。。:D

var pos = this.pos(element) //元素位置
, mos = this.mos(window.event) //鼠标位置
, eventHandlers = { MF : null, EF : null } //事件记录
, property = { x : mos.x - pos.x, y : mos.y - pos.y, left : pos.x, top : pos.y } //属性
, _MF = this.move(moveEventHandler, property) //移动过程事件闭包
, _EF = this.stop(element, stopEventHandler, eventHandlers); //移动停止事件闭包

try { document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges(); } catch (exp) {}

document.attachEvent('onmousemove', _MF); //鼠标移动
document.attachEvent('onmouseup', _EF); //鼠标释放

element.setCapture
? (element.setCapture(), element.attachEvent('onlosecapture', _EF))
: window.attachEvent('onblur', _EF); //鼠标捕获丢失则释放

eventHandlers.MF = _MF, eventHandlers.EF = _EF;

startEventHandler && startEventHandler(property); //直接传过去。。。请误污染- -
}

, move : function (moveEventHandler, property) {
//移动中
var wc = this;

return function (e) {
var mos = wc.mos(e || window.event), dom = wc.dom();
window.getSelection && window.getSelection().removeAllRanges();

/MSIE/.test(navigator.userAgent) && function () {
//IE滚屏
if (mos.x > dom.left + dom.width) dom.body.scrollLeft = mos.x - dom.width;
else if (mos.x dom.top + dom.height) dom.body.scrollTop = mos.y - dom.height;
else if (mos.y

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript 公用拖拽类代码

    D类 html, body { margin:0; } !!window.__defineGetter__ && !/MSIE/.test(navigator.userAgent) && function () { !window.opera && window.__defineGetter__('event', function () { //兼容Event对象 var o = arguments.callee; do { if (o.arguments[

  • 基于javascript的拖拽类封装详解

    效果图如下 github地址如下: github地址 使用方法 引入js和对应的css import Drag from '../../static/dragger.js' import './assets/css/dragger.css' 之后,实例化 new Drag({ id: 'box-dragger', showAngle: true, isScale: false, showBorder: false }) new Drag({ id: 'box-dragger2', canZoom

  • Javascript实现拖拽排序的代码

    运行环境:vue3.2以上,复制张贴运行即可看效果效果如下: <template> <div class="container"> <transition-group name="flip-list"> <div v-for="item in items" :key="item" draggable="true" class="items" @d

  • JavaScript 实现拖拽效果组件功能(兼容移动端)

    页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验.日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧. 预期目标 实现一个 Class 类,通过该 Class,可以将任意 DOM 元素(比如 div)一键变为可拖拽状态,也可以恢复成原来的状态,例如这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • 怎么用javascript进行拖拽2

    var iMouseDown = false; var dragObject = null; var curTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } function getMouseOffset

  • js实现图片放大和拖拽特效代码分享

    本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图:                               ----------------------查看效果 源码下载----------------------- 小提示:浏览

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

    本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType 需要监听的事件类型 * @param {Function} callback 事件监听回调函数 * @type Function 返回值为函数类型 * @return 返回监听回调函数的引用

  • JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

  • javascript完美拖拽的实现方法

    HTML代码: 复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="style.css" /><script type="text/javascri

  • JavaScript实现拖拽盒子效果

    本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下 实现效果: 1.单击关闭,关闭盒子 2.点击左上方'点击注册',打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤: 1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页. 2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子

随机推荐