js-拖拽功能 2 June 23rd, 2010
昨天用纯js写了个拖拽功能,在坐公车的时候回想一下,发现昨天那样写js-拖拽功能 还是有很大的问题。今天干完活再回头看看昨天的代码,果然发现不少问题,在这里列出来一下:
1,只能支持一个层的拖拽
2,坐标获取位置的问题
这两个问题折腾我一个下午时间,下面贴一下最新的代码,最新的代码支持多个层拖拽,更精准的获取鼠标的位置,同时添加对图片拖拽的支持。大家看代码是不是觉得很熟悉捏?哈哈,没错啦,偶就是模仿jquery的写法,哈哈,虽然还没看懂jquery的写法,但是还是先模仿一下。自我感觉良好。(*^__^*)
调用方法还是一样,只要在页面加载后,执行以下代码就OK
{
$(”Contain”).Draggable();
$(”Head”).Draggable();
$(”Frame”).Draggable();
}
源代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var DragUtility = function(id) {
document.getElementById(id).style.position ="absolute";
return new DragUtility.InitMousePos.Init(id);
},
_$ = window.$;
//定义全局变量来保存当前的拖拽的层
var currObject = null;
DragUtility.InitMousePos = {
obj: null,
Init: function(id) {
this.obj = document.getElementById(id);
this.obj.onmousedown = function(evt) {
//this.obj = document.getElementById(id);
this.style.cursor = "move";
//this.style.position = "absolute";
//再次点击层时候重新添加事件
if (document.onmousemove == null)
document.onmousemove = this.Move;
if (this.onmouseup == null)
this.onmouseup = this.Release;
currObject = this;
var evt = evt || window.event;
//如果DIV包含图片,拖拽时将显示禁止图标,因此必须将returnValue置为false
evt.returnValue = false;
//计算鼠标点击后,鼠标距离div左边界和上边界的距离
var divLeft = currObject.style.left.replace("px","");
var divTop = currObject.style.top.replace("px","");
if (evt.pageX || evt.pageY) {
currObject.mouseLeft = evt.pageX - divLeft;
currObject.mouseTop =evt.pageY -divTop;
}
else//ie
{
currObject.mouseLeft = evt.clientX + document.documentElement.scrollLeft-divLeft;
currObject.mouseTop = evt.clientY + document.documentElement.scrollLeft-divTop;
}
};
this.obj.Move = function(evt) {
if (typeof (currObject) == "undefined" || currObject == null) {
return;
}
var evt = evt || window.event;
var leftPox, topPox;
//计算div层left,top值
if (evt.pageX || evt.pageY) {
leftPox = evt.pageX - currObject.mouseLeft;
topPox = evt.pageY - currObject.mouseTop;
}
else//ie
{
//leftPox = evt.clientX + document.documentElement.scrollLeft - mouseX;
leftPox = evt.clientX + document.documentElement.scrollLeft-currObject.mouseLeft;
//topPox = evt.clientY+ document.documentElement.scrollTop-mouseY;
topPox = evt.clientY + document.documentElement.scrollTop-currObject.mouseTop;
}
currObject.style.left = leftPox;
currObject.style.top = topPox;
};
this.obj.Draggable = function() {
document.onmousemove = this.Move;
this.onmouseup = this.Release;
};
this.obj.Release = function() {
if (this.releaseCapture) {
this.releaseCapture();
document.onmousemove = null;
this.onmouseup = null;
this.currObject = null;
}
else if (window.captureEvents) {
document.onmousemove = null;
this.onmousemove = null;
this.currObject = null;
}
};
return this.obj;
}
};
window.DragUtility = window.$ = DragUtility;
})(window);
PS:今天还遇到一个问题,看到公司系统的有 以下代码
if(document.all)
document.getElementById(”historyDesc”).value = document.getElementById(”SRDiv”).innerText;
else
document.getElementById(”historyDesc).value = document.getElementById(”SRDiv”).textContent;
这里是要获取元素的innerText,我们都知道firefox下面是没有innerText这个属性的,它有类似textContent属性,但是textContent与InnerText有些区别,InnerText会将所有html标签去除,同时将多个空格变成一个,将换行转为”\r\n”(IE)或者”\n”(firefox),但是textContent则去除所有html标签,同时也去掉空格和换行。
因此如果想实现innerText同样的效果怎么办呢??在网上搜索了一下,很快就找到答案,这里MARK一下,只要在页面添加如下代码,那么firefox也可以用innerText啦。
if(window.navigator.userAgent.toString().toLowerCase().indexOf("msie") >=1)
return true;
else
return false;
}
//由于IE下的innerText与firefox下的textContent的区别,因此添加以下代码,使firefox下可以使用innerText
if(!isIE()){ //firefox innerText define
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i <childS.length; i++) {
if(childS[i].nodeType==1)
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}