>

原文出处sbf282.com,//使用IE的方式来取消事件冒泡

- 编辑:澳门博发娱乐官网 -

原文出处sbf282.com,//使用IE的方式来取消事件冒泡

9、封装拖拽对象

在前头后生可畏章我给我们分享了面向对象怎样完成,基于那么些基础知识,大家来将方面达成的拖拽封装为二个拖拽对象。大家的靶子是,只要大家声贝拉米个拖拽实例,那么传入的靶子成分将自行具有能够被拖拽的功用。

在实际付出中,三个目的大家平时会独自放在三个js文件中,那个js文件将单身作为三个模块,利用各样模块的艺术协会起来使用。当然这里未有复杂的模块交互,因为这些事例,我们只须求一个模块就可以。

为了防止变量污染,大家要求将模块放置于二个函数自试行办法模拟的块级成效域中。

JavaScript

; (function() { ... })();

1
2
3
4
;
(function() {
    ...
})();

在平日的模块社团中,大家只是独自的将众多js文件缩小成为二个js文件,由此这里的首先个分店则是为了以免上叁个模块的最后不用分号导致报错。必不可缺。当然在通过require可能ES6模块等艺术就不会产出这么的景况。

我们清楚,在包装三个目的的时候,我们可以将性能与艺术放置于构造函数恐怕原型中,而在加码了自实行函数之后,我们又有啥不可将品质和章程幸免与模块的里边成效域。那是闭包的学问。

那便是说大家面前遇到的挑战就在于,怎样客观的管理属性与方法的任务。

本来,每几个指标的气象都不等同,无法比量齐观,大家供给明显的接头那三种职位的特征技能做出最相符的主宰。

  • 构造函数中: 属性与格局为当前实例单独具备,只可以被当下实例访谈,何况每评释后生可畏(Wissu)个实例,在那之中的艺术都会被另行创造叁遍。
  • 原型中: 属性与方法为具备实例共同享有,能够被抱有实例访谈,新阐明实例不会另行创设方法。
  • 模块效率域中:属性和措施不可能被别的实例访谈,不过能被中间方法访谈,新注解的实例,不会再也创立同样的点子。

对此措施的推断比较容易。

因为在构造函数中的方法总会在声飞鹤个新的实例时被另行成立,因而我们表明的情势都尽量制止现身在构造函数中。

而假若你的点子中须要用到构造函数中的变量,恐怕想要公开,那就必要放在原型中。

假诺艺术供给个人不被外面访谈,那么就放置在模块成效域中。

对此属性放置于怎么样职位有些时候很难做出科学的判别,因而笔者很难交付一个正确的定义告诉你什么样性质必须要放在怎么着职位,那必要在事实上支付中连连的总计经验。但是总的来讲,照旧要组成那八个职位的风味来做出最合适的论断。

即便属性值只可以被实例单独具备,比方person对象的name,只可以属于某三个person实例,又举个例子这里拖拽对象中,某多个成分的始发地方,也仅仅只是这几个成分的近些日子岗位,那脾个性,则符合放在构造函数中。

而黄金时代旦五性格格仅仅供内部方法访谈,那脾特性就切合放在模块成效域中。

关于面向对象,上边的几点考虑本人觉着是那篇文章最值得认真思索的杰出。倘使在封装时未有思索清楚,很或许会超越非常多您意外的bug,所以建议大家结合本人的费用经历,多多缅想,总计出本人的见解。

依靠那么些思念,我们能够协和尝试封装一下。然后与本身的做一些绝对来说,看看咱们的主见有何样分化,在底下例子的表明中,我将和谐的主张表明出来。

点击查看已经封装好的demo

js 源码

JavaScript

; (function() { // 那是叁个私家属性,没有须要被实例访谈 var transform = getTransform(); function Drag(selector) { // 放在构造函数中的属性,都以属于每三个实例单独具备 this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector); this.startX = 0; this.startY = 0; this.sourceX = 0; this.sourceY = 0; this.init(); } // 原型 Drag.prototype = { constructor: Drag, init: function() { // 初步时索要做些什么专门的学业 this.setDrag(); }, // 稍作改换,仅用于获取当前因素的习性,类似于getName getStyle: function(property) { return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property]; }, // 用来取妥当前因素的职位新闻,注意与事先的分化之处 getPosition: function() { var pos = {x: 0, y: 0}; if(transform) { var transformValue = this.getStyle(transform); if(transformValue == 'none') { this.elem.style[transform] = 'translate(0, 0)'; } else { var temp = transformValue.match(/-?d+/g); pos = { x: parseInt(temp[4].trim()), y: parseInt(temp[5].trim()) } } } else { if(this.getStyle('position') == 'static') { this.elem.style.position = 'relative'; } else { pos = { x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0), y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0) } } } return pos; }, // 用来设置当前因素的职责 setPostion: function(pos) { if(transform) { this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)'; } else { this.elem.style.left = pos.x + 'px'; this.elem.style.top = pos.y + 'px'; } }, // 该办法用来绑定事件 setDrag: function() { var self = this; this.elem.add伊夫ntListener('mousedown', start, false); function start(event) { self.startX = event.pageX; self.startY = event.pageY; var pos = self.getPosition(); self.sourceX = pos.x; self.sourceY = pos.y; document.add伊夫ntListener('mousemove', move, false); document.add伊夫ntListener('mouseup', end, false); } function move(event) { var currentX = event.pageX; var currentY = event.pageY; var distanceX = currentX - self.startX; var distanceY = currentY - self.startY; self.setPostion({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() }) } function end(event) { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', end); // do other things } } } // 私有方法,仅仅用来获得transform的相配写法 function getTransform() { var transform = '', divStyle = document.createElement('div').style, transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], i = 0, len = transformArr.length; for(; i < len; i++) { if(transformArr[i] in divStyle) { return transform = transformArr[i]; } } return transform; } // 风华正茂种对外暴光的办法 window.Drag = Drag; })(); // 使用:表明2个拖拽实例 new Drag('target'); new Drag('target2');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
;
(function() {
    // 这是一个私有属性,不需要被实例访问
    var transform = getTransform();
 
    function Drag(selector) {
        // 放在构造函数中的属性,都是属于每一个实例单独拥有
        this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;
 
        this.init();
    }
 
 
    // 原型
    Drag.prototype = {
        constructor: Drag,
 
        init: function() {
            // 初始时需要做些什么事情
            this.setDrag();
        },
 
        // 稍作改造,仅用于获取当前元素的属性,类似于getName
        getStyle: function(property) {
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },
 
        // 用来获取当前元素的位置信息,注意与之前的不同之处
        getPosition: function() {
            var pos = {x: 0, y: 0};
            if(transform) {
                var transformValue = this.getStyle(transform);
                if(transformValue == 'none') {
                    this.elem.style[transform] = 'translate(0, 0)';
                } else {
                    var temp = transformValue.match(/-?d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if(this.getStyle('position') == 'static') {
                    this.elem.style.position = 'relative';
                } else {
                    pos = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }
 
            return pos;
        },
 
        // 用来设置当前元素的位置
        setPostion: function(pos) {
            if(transform) {
                this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } else {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },
 
        // 该方法用来绑定事件
        setDrag: function() {
            var self = this;
            this.elem.addEventListener('mousedown', start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;
 
                var pos = self.getPosition();
 
                self.sourceX = pos.x;
                self.sourceY = pos.y;
 
                document.addEventListener('mousemove', move, false);
                document.addEventListener('mouseup', end, false);
            }
 
            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;
 
                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;
 
                self.setPostion({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }
 
            function end(event) {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', end);
                // do other things
            }
        }
    }
 
    // 私有方法,仅仅用来获取transform的兼容写法
    function getTransform() {
        var transform = '',
            divStyle = document.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
 
            i = 0,
            len = transformArr.length;
 
        for(; i < len; i++)  {
            if(transformArr[i] in divStyle) {
                return transform = transformArr[i];
            }
        }
 
        return transform;
    }
 
    // 一种对外暴露的方式
    window.Drag = Drag;
})();
 
// 使用:声明2个拖拽实例
new Drag('target');
new Drag('target2');

那般贰个拖拽对象就封装完成了。

提议我们依据笔者提供的合计格局,多多尝试封装一些组件。举个例子封装二个弹窗,封装贰个循环轮播等。练得多了,面向对象就不再是主题素材了。这种思维方法,在未来别的时候都以力所能致运用的。

下风流倜傥章深入分析jQuery对象的落到实处,与什么将大家这边封装的拖拽对象增加为jQuery插件。

2 赞 1 收藏 评论

sbf282.com 1

你大概感兴趣的文章:

  • jQuery常用知识点总括以至平常打包常用函数
  • 依附jquery封装的贰个js分页
  • jquery数组封装使用方法分享(jquery数组遍历)
  • Jquery封装tab自动切换效果的现实性落实
  • jquery自动将form表单封装成json的切切实实贯彻
  • jquery datatable后台封装数据示例代码
  • jQuery主旨图切换特效插件封装实例
  • 依照jquery的用dl模拟达成可自定义样式的SELECT下拉列表(已打包)
  • jQueryUI的Dialog的简易包装
  • 【优秀源码收藏】基于jQuery的类型常见函数封装集结

连锁小说

连带寻觅:

明日看吗

寻觅本领库

回来首页

  • 隐性调用php程序的点子
  • 浅谈JavaScript中的Math.atan()方法的使用
  • JavaScript中反正弦函数Math.asin()的利用简要介绍
  • JavaScript中的acos()方法运用详解
  • 介绍JavaScript中Math.abs()方法的行使
  • JavaScript中Math.SQRT2属性的采取详解

连锁频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

JavaScript常用脚本集中(三),javascript脚本集中

通过数组,拓宽字符串拼接轻松产生品质的难题

复制代码 代码如下:
function StringBuffer() {
    this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
    return this;
}
StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
}
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");
var result = buffer.toString();
alert(result);    //Hello javascript

代码来源:

页面 视口 滚动条的岗位的增加援助函数

复制代码 代码如下:
/*规定当前页面高度和宽度的四个函数*/
function pageHeight() {
    return document.body.scrollHeight;
}
function pageWidth() {
    return document.body.scrollWidth;
}
/*规定滚动条水平和垂直的岗位*/
function scrollX() {
    var de = document.documentElement;
    return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
function scrollY() {
    var de = document.documentElement;
    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/*明确浏览器视口的惊人和宽度的五个函数*/
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
function windowWidth() {
    var de = document.documentElement;
    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
}

代码来源:

调治将养因素发光度的函数

复制代码 代码如下:
/*调护诊疗因素折射率的函数*/
function setOpacity(elem, level) {
    //IE管理反射率
    if (elem.filters) {
        elem.style.filters = 'alpha(opacity=' + level + ')';
    } else {
        elem.style.opacity = level / 100;
    }
}

代码来源:

获得鼠标地点的几个通用的函数

复制代码 代码如下:
/*七个通用函数,用于获取鼠标相对于任何页面包车型客车近期地点*/
function getX(e) {
    e = e || window.event;
    return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e) {
    e = e || window.event;
    return e.pageY || e.clientY + document.body.scrollTop;
}
/*三个获得鼠标相对于当下成分地方的函数*/
function getElementX(e) {
    return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
    return (e && e.layerY) || window.event.offsetY;
}

代码来源:

动用cssdisplay属性来切换来分可知性的龙马精神组函数

复制代码 代码如下:
/**
 * 使用display来掩盖成分的函数
 * */
function hide(elem) {
    var curDisplay = getStyle(elem, 'display');

    if (curDisplay != 'none') {
        elem.$oldDisplay = curDisplay;
    }
    elem.style.display = 'none';
}
/**
 * 使用display来突显成分的函数
 * */
function show(elem) {
    elem.style.display = elem.$oldDisplay || '';
}

代码来源:

体制相关的通用函数

复制代码 代码如下:
/**
 * 获取内定成分(elem)的体裁属性(name)
 * */
function getStyle(elem, name) {
    //假设存在于style[]中,那么它已被安装了(并且是当前的)
    if (elem.style[name]) {
        return elem.style[name];
    }
    //否则,测试IE的方法
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    //或者W3C的方法
    else if(document.defaultView && document.defaultView.getComputedStyle){
        name = name.replace(/(A-Z)/g, "-$1");
        name = name.toLowerCase();
        var s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    //不然,顾客使用的是任何浏览器
    else {
        return null;
    }
}

代码来源:

获取成分当前的中度和幅度

复制代码 代码如下:
/**
 * 获取成分的忠实高度
 * 信任的getStyle见上边包车型地铁函数。
 * */
function getHeight(elem) {
    return parseInt(getStyle(elem, 'height'));
}
/**
 * 获取成分的诚实宽度
 * 信任的getStyle见上边的函数
 * */
function getWidth(elem) {
    return parseInt(getStyle(elem, 'width'));
}

代码来源:

如上正是本文分享的javascript常用脚本了,希望大家能够赏识。

通过数组,拓宽字符串拼接轻松导致质量的标题 复制代码 代码如下: function StringBuffer() {...

function addEvent(element, type, handler) {
if (!handler.$$guid) {//为每一个事件处理函数赋予一个单身的ID
handler.$$guid = addEvent.guid++;
}
if (!element.events) {//为成分建构二个平地风波类型的散列表
element.events = {};
}
var handlers = element.events[type];
if (!handler) {
handlers = element.events[type] = {};
if (element["on" + type]) {//存款和储蓄已有的事件管理函数(假设已经存在八个)
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;//在散列表中存在该事件管理函数
element["on" + type] = handleEvent;
}
addEvent.guid = 1;//创制独立ID的计数器
function remove伊芙nt(element, type, handler) {//从散列表中剔除事件管理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);//得到事件指标(IE使用全局的事件指标)
var handlers = this.events[event.type];//获得事件管理函数散列表的引用
for (var i in handlers) {//依次实施各种事件管理函数
this.$$handlerEvent = handlers[i];
if (this.$$handlerEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
}
function fix伊夫nt(event) {//增添一些IE事件目的的贫乏的秘籍
event.preventDefault = fixEvent.preventDefault;//增添W3C标准事件措施
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
}
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
}
//获取钦点成分elem的体裁属性
function getStyle(elem, name) {
if (elem.style[name]) {//假诺属性存在于style[]中,那么它已棉被服装置了(何况是时下的)
return elem.style[name];
} else {
if (elem.currentStyle) {//尝试使用IE的法子
return elem.currentStyle[name];
} else if (document.defaultView && document.defaultView.getComputedStyle) {//可能W3C的方法,如若存在的话
//name=name.replace(/([A-Z)/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, '');//获取样式对象并获取属性(存在的话)值
return s && s.getPropertyValue(name);
} else {
return null;
}
}
}
//获取成分的X(水平、左端)地方
function pageX(elem) {
return elem.offsetParent ?//查看我们是还是不是位于根成分
elem.offsetLeft + pageX(elem.offsetParent) ://借使大家能连续取得上三个要素,扩展当前的偏移量并再三再四发展递归
elem.offsetLeft;//不然获得当前的偏移量
}
//获得成分Y(垂直、顶上部分)地点
function pageY(elem) {
return elem.offsetParent ?//查看我们是否位于根元素
elem.offsetTop + pageY(elem.offsetParent) ://假若能持续获得上二个因素,扩张当前的偏移量并持续进步递归
elem.offsetTop;//不然获取当前的偏移量
}
//获取成分绝对于老爸的水准地点
function parentX(elem) {
return elem.parentNode == elem.offsetParent ?//借使offsetParent是因素的阿爸,那么提前退出
elem.offsetLeft :
pageX(elem) - pageX(elem.parentNode);//不然,大家要求找到成分和因素的爹爹相对于龙行虎步体页面地点,并总括他们事先的差
}
//获取元素绝对于老爹的垂直地方
function parentY(elem) {
return elem.parentNode == elem.offsetParent ?//假诺offsetParent是因素的老爸,那么提前退出
elem.offsetTop :
pageX(elem) - pageY(elem.parentNode);//不然,大家必要找到元素和要素的生父相对于全部页面地点,并企图他们前边的差
}
//恢复生机css原的品质值 幸免reset css函数副功用的函数
function restoreCSS(elem, prop) {
for (var i in prop) {//重新恢复设置全部属性,恢复生机它们的原有值
elem.style[i] = prop[i];
}
}
//设置CSS意气风发组属性的函数,它能够回复到原本设置
function resetCSS(elem, prop) {
var old = [];
for (var i in prop) {
old[i] = elem.style[i];//记录旧的属性值
elem.style[i] = prop[i];//并设置新的值
}
return old;//再次来到已经更改的值集结,预留给restoreCSS函数使用
}
function getHeight(elem) {//获得成分的实在高度
return parseInt(getStyle(elem, 'height'));//获得CSS的末尾值并深入分析出可用的数值
}
function getWidth(elem) {//获得成分的实在宽度
return parseInt(getStyle(elem, 'width'));//获得CSS的末梢值并解析出可用的数值
}
//查找成分完整的,大概的惊人
function fullHeight(elem) {
//如果成分是体现的,那么使用offsetHeight就能够博得高度,若无offsetHeight,则动用getHeight()
if (getStyle(elem, 'display') != 'none') {
return elem.offsetHeight || getHeight(elem);
}
//管理display为none的成分,所以重新恢复设置它的css属性以获得更规范的读数
var old = resetCSS(elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientHeight || getHeight(elem);//使用clientHeihgt找到成分的总体高度,假如还不奏效,则应用getHeight函数
restoreCSS(elem, old);//恢复生机css原的属性
return h;//重回成分的完好中度
}
//查找成分完整的,大概的大幅
function fullWidth(elem) {
//借使成分是呈现的,那么使用offsetWidth就能博取中度,若无offsetHeight,则运用getHeight()
if (getStyle(elem, 'display') != 'none') {
return elem.offsetWidth || getWidth(elem);
}
//管理display为none的要素,所以重新初始化它的css属性以博取更加准确的读数
var old = resetCSS(elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientWidth || getWidth(elem);//使用clientWidth找到元素的完全中度,假如还不奏效,则动用getWidth函数
restoreCSS(elem, old);//苏醒css原的品质
return h;//重返成分的欧洲经济共同体中度
}

8、代码完结

part1、计划干活

JavaScript

// 获取目标元素对象 var oElem = document.getElementById('target'); // 注脚2个变量用来保存鼠标伊始地点的x,y坐标 var startX = 0; var startY = 0; // 证明2个变量用来保存目的成分起初地方的x,y坐标 var sourceX = 0; var sourceY = 0;

1
2
3
4
5
6
7
8
9
10
// 获取目标元素对象
var oElem = document.getElementById('target');
 
// 声明2个变量用来保存鼠标初始位置的x,y坐标
var startX = 0;
var startY = 0;
 
// 声明2个变量用来保存目标元素初始位置的x,y坐标
var sourceX = 0;
var sourceY = 0;

part2、功效函数

因为此前已经贴过代码,就不再重复

JavaScript

// 获取当前浏览器扶持的transform宽容写法 function getTransform() {} // 获取成分属性 function getStyle(elem, property) {} // 获取成分的开头地方function getTargetPos(elem) {} // 设置成分的启幕地点 function setTargetPos(elem, potions) {}

1
2
3
4
5
6
7
8
9
10
11
// 获取当前浏览器支持的transform兼容写法
function getTransform() {}
 
// 获取元素属性
function getStyle(elem, property) {}
 
// 获取元素的初始位置
function getTargetPos(elem) {}
 
// 设置元素的初始位置
function setTargetPos(elem, potions) {}

part3、表明四个事件的回调函数

这多个措施正是兑现拖拽的着力所在,作者将从严依照地点思维导图中的步骤来形成大家的代码。

JavaScript

// 绑定在mousedown上的回调,event为流传的平地风波目的 function start(event) { // 获取鼠标开始地方 startX = event.pageX; startY = event.pageY; // 获取成分开端地点 var pos = getTargetPos(oElem); sourceX = pos.x; sourceY = pos.y; // 绑定 document.add伊夫ntListener('mousemove', move, false); document.addEventListener('mouseup', end, false); } function move(event) { // 获取鼠标当前职责 var currentX = event.pageX; var currentY = event.pageY; // 总结差值 var distanceX = currentX - startX; var distanceY = currentY - startY; // 总结并设置成分当前义务setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() }) } function end(event) { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', end); // do other things }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 绑定在mousedown上的回调,event为传入的事件对象
function start(event) {
    // 获取鼠标初始位置
    startX = event.pageX;
    startY = event.pageY;
 
    // 获取元素初始位置
    var pos = getTargetPos(oElem);
 
    sourceX = pos.x;
    sourceY = pos.y;
 
    // 绑定
    document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);
}
 
function move(event) {
    // 获取鼠标当前位置
    var currentX = event.pageX;
    var currentY = event.pageY;
 
    // 计算差值
    var distanceX = currentX - startX;
    var distanceY = currentY - startY;
 
    // 计算并设置元素当前位置
    setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (sourceY + distanceY).toFixed()
    })
}
 
function end(event) {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
    // do other things
}

OK,二个大致的拖拽,就那样欢娱的兑现了。点击下边包车型地铁链接,能够在线查看该例子的demo。

选取原生js达成拖拽

//获取成分的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,”");
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//获取成分相对于那几个页面包车型客车x和y坐标。
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
//获取成分相对于父成分的x和y坐标。
function parentX(elem){
return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//获取使用css定位的成分的x和y坐标。
function posX(elem){
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}
//设置成分地点。
function setX(elem,pos){
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}
//增港成分X和y坐标。
function addX(elem,pos){
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}
//获取成分选取css调节大小的可观和宽度
function getHeight(elem){
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
return parseInt(getStyle(elem,”width”));
}
//获取元素大概,完整的可观和宽窄
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var h=elem.clientHeight||getHeight(elem);
restoreCss(elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”){
return getWidth(elem)||elem.offsetWidth;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w;
}
}
//设置css,并保留旧的css
function resetCss(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCss(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}
//展现和藏身
function show(elem){
elem.style.display=elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”);
if(curDisplay!=”none”){
elem.$oldDisplay=curDisplay;
elem.style.display=”none”;
}
}
//设置反射率
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}
//滑动
function slideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”;
show(elem);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){elem.style.height=(pos/100*h)+”px”;},(pos*10));
}
}
}
//渐变
function fadeIn(elem){
show(elem);
setOpacity(elem,0);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
}
}
}
//获取鼠标光标相对于任何页面的岗位。
function getX(e){
e=e||window.event;
return e.pageX||e.clientX+document.body.scrollLeft;
}
function getY(e){
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;
}
//获取鼠标光标绝对于当下成分的职位。
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}
//获取页面包车型大巴中度和宽度
function getPageHeight(){
var de=document.documentElement;
return document.body.scrollHeight||(de&&de.scrollHeight);
}
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth);
}
//获取滚动条的职位。
function scrollX(){
var de=document.documentElement;
return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}
//获取视口的惊人和宽窄。
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth;
}

帮客研究

function stopBubble(e) {
if (e && e.stopPropagation) {//假使传入了风浪指标,那么正是非IE浏览器
e.stopPropagation();
} else {
window.event.cancelBubble = true;//使用IE的方式来打消事件冒泡
}
}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();//幸免暗中同意浏览器行为(W3C)
} else {
window.event.returnValue = false;
}
return false;
}

本文由胜博发-前端发布,转载请注明来源:原文出处sbf282.com,//使用IE的方式来取消事件冒泡