js 拖拽代码,JS代码库,德仔网

代码语言
代码分类
【JS】 js 拖拽
作者:徐飞 / 发布于2011/10/9/ 871
<div>var Util = new Object();
Util.getUserAgent = navigator.userAgent;
Util.isGecko = Util.getUserAgent.indexOf("Gecko") != -1;
Util.isOpera = Util.getUserAgent.indexOf("Opera") != -1;</div>
<div>Util.getOffset = function (el, isLeft) {
 var retValue = 0;
 while (el != null) {
 retValue += el["offset" + (isLeft ? "Left" : "Top")];
 el = el.offsetParent;
 }
 return retValue;
};
Util.bindFunction = function (el, fucName) {
 return function () {
 return el[fucName].apply(el, arguments);
 };
};
Util.re_calcOff = function (el) {
 for (var i = 0; i < Util.dragArray.length; i++) {
 var ele = Util.dragArray[i];
 ele.elm.pagePosLeft = Util.getOffset(ele.elm, true);
 ele.elm.pagePosTop = Util.getOffset(ele.elm, false);
 }
 var nextSib = el.elm.nextSibling;
 while (nextSib) {
 nextSib.pagePosTop -= el.elm.offsetHeight;
 nextSib = nextSib.nextSibling;
 }
};</div>
<div>Util.hide = function () {
 Util.rootElement.style.display = "none";
};</div>
<div>Util.show = function () {
 Util.rootElement.style.display = "";
};</div>
<div>ghostElement = null;
getGhostElement = function () {
 if (!ghostElement) {
 ghostElement = document.createElement("DIV");
 ghostElement.className = "modbox";
 ghostElement.backgroundColor = "";
 ghostElement.style.border = "2px dashed #aaa";
 ghostElement.innerHTML = "&nbsp;";
 }
 return ghostElement;
};</div>
<div>function draggable(el) {

 this._dragStart = start_Drag;
 this._drag = when_Drag;
 this._dragEnd = end_Drag;
 this._afterDrag = after_Drag;
 this.isDragging = false;
 this.elm = el;
 this.header = el; //document.getElementById(el.id + "_h");
 this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 0;
 if (this.header) {
 this.header.style.cursor = "move";
 Drag.init(this.header, this.elm);
 this.elm.onDragStart = Util.bindFunction(this, "_dragStart");
 this.elm.onDrag = Util.bindFunction(this, "_drag");
 this.elm.onDragEnd = Util.bindFunction(this, "_dragEnd");
 }
};</div>
<div>function start_Drag() {
 Util.re_calcOff(this);
 this.origNextSibling = this.elm.nextSibling;
 var _ghostElement = getGhostElement();
 var offH = this.elm.offsetHeight;
 if (Util.isGecko) {
 offH -= parseInt(_ghostElement.style.borderTopWidth) * 2;
 }
 var offW = this.elm.offsetWidth;
 var offLeft = Util.getOffset(this.elm, true);
 var offTop = Util.getOffset(this.elm, false);
 Util.hide();
 this.elm.style.width = offW + "px";
 _ghostElement.style.height = offH + "px";
 this.elm.parentNode.insertBefore(_ghostElement, this.elm.nextSibling);
 this.elm.style.position = "absolute";
 this.elm.style.zIndex = 100;
 this.elm.style.left = offLeft + "px";
 this.elm.style.top = offTop + "px";
 Util.show();
 this.isDragging = false;
 return false;
};
function when_Drag(clientX, clientY) {
 if (!this.isDragging) {
 this.elm.onmousemove = null;
 this.elm.onmouseout = null;
this.elm.style.backgroundColor = "#555";
this.elm.style.color = "#fff";
 this.elm.style.filter = "alpha(opacity=70)";
 this.elm.style.opacity = 0.7;
 this.isDragging = true;
 }
 var found = null;
 var max_distance = 100000000;
 for (var i = 0; i < Util.dragArray.length; i++) {
 var ele = Util.dragArray[i];
 var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2) + Math.pow(clientY - ele.elm.pagePosTop, 2));
 if (ele == this) {
 continue;
 }
 if (isNaN(distance)) {
 continue;
 }
 if (distance < max_distance) {
 max_distance = distance;
 found = ele;
 }
 }
 var _ghostElement = getGhostElement();
 if (found != null && _ghostElement.nextSibling != found.elm) {
 found.elm.parentNode.insertBefore(_ghostElement, found.elm);
 if (Util.isOpera) {
 document.body.style.display = "none";
 document.body.style.display = "";
 }
 }
};</div>
<div>/*******************************
* 模拟实现 class选择器
*/
function getElementsByClass(searchClass, node, tag) {
var classElements = new Array();
if (node == null) {
node = document;
}
if (tag == null) {
tag = '*';
}
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(<a href="file://\\s|$">\\s|$</a>)");
for (var i=0, j=0; i<elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}

return classElements;
}
<div>
var http_request = false;//ajax 对象 
function changepage(url, params, type, func) //type get post
{
type = type.toUpperCase();

http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
 http_request = new XMLHttpRequest();
 if (http_request.overrideMimeType) {
 http_request.overrideMimeType('text/xml');
 }
 } else if (window.ActiveXObject) { // IE
 try {
 http_request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 http_request = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {}
 }
 }
<div> if (!http_request) {
 alert('Giving up :( Cannot create an XMLHTTP instance');
 return false;
 }
 http_request.onreadystatechange = function() {LoadContent(func)}; 
//alert("url="+url)</div>
<div> if (type == "GET") {
 if (params.length > 0) {
 if(url.indexOf("?")>-1)
 url=url+ "&" + params
 else
 url=url+ "?" + params;
 }
 http_request.open('GET', url, true);
 http_request.send(null);
 } else if (type == "POST") {
 http_request.open('POST', url, true);
 http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 http_request.send(params);
 } else {
 alert("错误的提交类型，不支持！");
 return false;
 }
}
</div>
<div>function LoadContent(func)
{
if (http_request.readyState != 4) 
{
//alert("出现错误http_request.readyState"+http_request.readyState);
return; 
}
if (http_request.status != 200)
{
 //alert("出现错误"+http_request.status);;
return;
} 

func();
//document.getElementById('programlist').innerHTML = "ddddddddddddddddddddddddd"; 
}
<div>function ajax_del(id) {
var params = "CMD=del"+"&ID=" + id;

console.log(params);</div>
if (confirm("是否确定要删除？")) {
changepage("/jsp/indication/gprs/templeteList.action.jsp", params, "POST", function() {
var i, ele, reg;
var idx = -1;
//reg = eval("/^.*_" + id + "$/");
for (i=0; i<Util.dragArray.length; i++) {
ele = Util.dragArray[i].elm;
if (ele.id == id) {
ele.parentNode.removeChild(ele);
idx = i;
}

if (idx >= 0 && i > idx) {
ele.childNodes[0].innerHTML = i;
}
}

if (idx >= 0) {
var tempArray = Util.dragArray;
Util.dragArray = new Array();
for (i=0; i<tempArray.length; i++) {
if (i != idx)
Util.dragArray.push(tempArray[i]);
}
}

});
}

return false;
}
<div>
function savelist() {</div>
<div>var i, j, elms = getElementsByClass("tabRow", document, "div");
var temp1, temp2;
var idArr = new Array();
for (i=0; i<elms.length; i++) {

idArr.push(elms[i].id + "_" + elms[i].childNodes[0].innerHTML);
/*
for (dataEle in Util.datas) {
if (dataEle==elms[i].id) {
temp1 = Util.datas[dataEle];
temp2 = elms[i].childNodes[0].innerHTML;
if (temp1 != temp2)
idArr.push(dataEle + "_" + temp1 + "_" + temp2);
break;
}
}*/
}

if (idArr.length < 1) {

} else {
var params = "CMD=savelist&changeStr=" + idArr.join();
changepage(Util.actionURL, params, "POST", function() {
document.getElementById("saveTip").style.display = "none";
document.getElementById("savedTip").style.display = "";

for (i=0; i<elms.length; i++) {
Util.datas[elms[i].id] = elms[i].childNodes[0].innerHTML;
}
});
}

}
<div>
function end_Drag() {
 if (this._afterDrag()) {
 //remote call to save the change
 
 document.getElementById("saveTip").style.display = "";
 document.getElementById("savedTip").style.display = "none";
 }
 return true;
};
function after_Drag() {
 var returnValue = false;
 Util.hide();
 this.elm.style.position = "";
 this.elm.style.width = "";
 this.elm.style.zIndex = "";
 this.elm.style.filter = "";
 this.elm.style.opacity = "";
this.elm.style.backgroundColor = "";
this.elm.style.color = "";
var tempElm = this.elm;
this.elm.onmousemove = function() {focusOn(tempElm)};
this.elm.onmouseout = function() {focusOut(tempElm)};
 var ele = getGhostElement();
 if (ele.nextSibling != this.origNextSibling) {
 ele.parentNode.insertBefore(this.elm, ele.nextSibling);
 returnValue = true;
 }
 ele.parentNode.removeChild(ele);</div>
<div>var i, elms = getElementsByClass("tabRow", document, "div");
for (i=0; i<elms.length; i++) {
elms[i].childNodes[0].innerHTML = i+1;
} 
 Util.show();
 if (Util.isOpera) {
 document.body.style.display = "none";
 document.body.style.display = "";
 }
 return returnValue;
};
var Drag = {
obj:null, 
init:function (elementHeader, element) {
 elementHeader.onmousedown = Drag.start;
 elementHeader.obj = element;
 if (isNaN(parseInt(element.style.left))) {
 element.style.left = "0px";
 }
 if (isNaN(parseInt(element.style.top))) {
 element.style.top = "0px";
 }
 element.onDragStart = new Function();
 element.onDragEnd = new Function();
 element.onDrag = new Function();
},
start:function (event) {
 var element = Drag.obj = this.obj;
 event = Drag.fixE(event);
 if (event.which != 1) {
 return true;
 }
 element.onDragStart();
 element.lastMouseX = event.clientX;
 element.lastMouseY = event.clientY;
 
 document.onmouseup = Drag.end;
 document.onmousemove = Drag.drag;
 return false;
}, 
drag:function (event) {
 event = Drag.fixE(event);
 if (event.which == 0) {
 return Drag.end();
 }
 var element = Drag.obj;
 var _clientX = event.clientY;
 var _clientY = event.clientX;
 
 if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
 return false;
 }
 var _lastX = parseInt(element.style.top);
 var _lastY = parseInt(element.style.left);
 var newX, newY;
 newX = _lastY + _clientY - element.lastMouseX;
 newY = _lastX + _clientX - element.lastMouseY;
 element.style.top = newY + "px";
 element.lastMouseX = _clientY;
 element.lastMouseY = _clientX;
 element.onDrag(newX, newY);
 return false;
},
end:function (event) {
 event = Drag.fixE(event);
 document.onmousemove = null;
 document.onmouseup = null;
 var _onDragEndFuc = Drag.obj.onDragEnd();
 Drag.obj = null;
 return _onDragEndFuc;
}, 
fixE:function (ig_) {
 if (typeof ig_ == "undefined") {
 ig_ = window.event;
 }
 if (typeof ig_.layerX == "undefined") {
 ig_.layerX = ig_.offsetX;
 }
 if (typeof ig_.layerY == "undefined") {
 ig_.layerY = ig_.offsetY;
 }
 if (typeof ig_.which == "undefined") {
 ig_.which = ig_.button;
 }
 return ig_;
}
};</div>
<div></div>
<div>var _IG_initDrag = function (el, actionURL) {
 Util.rootElement = el;
 Util._rows = Util.rootElement.tBodies[0].rows[0];
 Util.column = Util._rows.cells;
 Util.actionURL = actionURL;
 
 Util.pWindow = window.parent;
 Util.datas = {};
 
 if (Util.pWindow) {
 Util.pWindow.document.onmouseup = function() {return false};
 Util.pWindow.document.onmousemove = function() {return false};
 var i, iframes;
 
 if (document.all) {
 iframes = Util.pWindow.frames;
 for (i=0; i<iframes.length; i++) {
 if (iframes[i].document != document) {
 iframes[i].document.onmouseup = function() {return false};
 iframes[i].document.onmousemove = function() {return false};
 }
 }
 } else {
 iframes = Util.pWindow.document.getElementsByTagName("frame");
 for (i=0;i<iframes.length;i++) {
 if (iframes[i].document != document) {
 iframes[i].contentDocument.onmouseup = function() {return false};
 iframes[i].contentDocument.onmousemove = function() {return false};
 }
 }
 }
 }
 
 Util.dragArray = new Array();
 var counter = 0;
 for (var i = 0; i < Util.column.length; i++) {
 var ele = Util.column[i];
 for (var j = 0; j < ele.childNodes.length; j++) {
 var ele1 = ele.childNodes[j];
 if (ele1.tagName == "DIV") {
 if (ele1.childNodes[0]) {
 ele1.childNodes[0].innerHTML = j+1;
 Util.datas[ele1.id] = j+1;
 }
 Util.dragArray[counter] = new draggable(ele1);
 counter++;
 }
 }
 }
};
</div>
试试其它关键字
　拖拽　
同语言下
可能有用的
徐飞贡献的其它代码(2)