我需要在draggable元素上创建帮助器(类似于旧的win xp或其他os [idk],当你移动窗口时,你首先看到" shadow"然后窗口移动到那个位置),但只有纯JS(没有jQuery!)。原因:在我的项目中,我需要捕捉一些功能和事件,暂时不重要。
以下是我现在所拥有的代码:http://bit.ly/RShqz6
var Draggable = function (id) {
var el = document.getElementById(id),
isDragReady = false,
dragoffset = {
x: 0,
y: 0
};
this.init = function () {
//only for this demo
el.style.position = "absolute";
//this.initPosition();
this.events();
};
//only for this demo
this.initPosition = function () {
el.style.top = "20px";
el.style.left = "48%";
};
//events for the element
this.events = function () {
var self = this;
_on(el, 'mousedown', function (e) {
isDragReady = true;
//corssbrowser mouse pointer values
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
dragoffset.x = e.pageX - el.offsetLeft;
dragoffset.y = e.pageY - el.offsetTop;
});
_on(document, 'mouseup', function () {
isDragReady = false;
});
_on(document, 'mousemove', function (e) {
if (isDragReady) {
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
el.style.top = (e.pageY - dragoffset.y) + "px";
el.style.left = (e.pageX - dragoffset.x) + "px";
}
});
};
//cross browser event Helper function
var _on = function (el, event, fn) {
document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
};
this.init();
}
new Draggable('box');
有什么想法吗?