拖曳实例,并且用cookie记录dom最后的位置
<div id="demo"></div>
<script>
var oDemo = document.getElementById('demo');
var manageCookie = {
setCookie: function (name, value, data) {
document.cookie = name + '=' + value + ';max-age=' + data;
return this;
},
removeCookie: function (name) {
this.setCookie(name, '', -1);
return this;
},
getCookie: function (name, callback) {
var allCookieArr = document.cookie.split('; ');
var len = allCookieArr.length;
for (var i = 0; i < len; i++) {
var itemCookieArr = allCookieArr[i].split('=');
if (itemCookieArr[0] == name) {
callback(itemCookieArr[1]);
return this;
}
}
callback(null);
return this;
}
}
var drag = {
init: function (dom) {
this.dom = dom;
this.bindEvent();
var _self = this
manageCookie.getCookie('newLeft', function (data) {
_self.dom.style.left = data +'px'; // 注意此处的this指向window,
}).getCookie('newTop', function (data) {
_self.dom.style.top = data + 'px';
});
},
bindEvent: function () {
this.dom.onmousedown = this.mouseDown.bind(this); // 注意此处的bind改变this指向为drag
},
mouseDown: function (e) {
document.onmousemove = this.mouseMove.bind(this);
document.onmouseup = this.mouseUp.bind(this);
this.disY = e.clientY - this.dom.offsetTop;
this.disX = e.clientX - this.dom.offsetLeft;
},
mouseMove: function (e) {
this.newLeft = e.clientX - this.disX;
this.newTop = e.clientY - this.disY;
this.dom.style.left = this.newLeft + 'px';
this.dom.style.top = this.newTop + 'px';
manageCookie.setCookie('newLeft', this.newLeft, 10000).setCookie('newTop', this.newTop, 10000)
},
mouseUp: function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
drag.init(oDemo)
</script>