javascript實現拖拽並替換網頁塊元素

jiestyle21發表於2011-10-19
JavaScript網頁

見圖


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>DragToReplaceDeom</title> 
<style> 
#displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} 
.row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} 
.row span{display:inline-block;width:60px;clear:none;background:#9192B1;height:30px;line-height:30px;margin-bottom:30px;text-align:center;} 
span.usr{cursor:pointer;position:absolute;display:inline-block;width:60px;clear:none;height:30px;line-height:30px;margin-bottom:30px;text-align:center;background:#4DA74D;color:#fff;} 
span.usr.catch{background:#BD9B33!important;} 
</style> 
</head> 
<body> 
<div id="displayRoom"> 
<div class="row"> 
<span><span class="usr" id="345">學生甲</span></span><span></span><span></span><span></span></div> 
<div class="row"> 
<span><span class="usr" id="123">學生乙</span></span><span id="3"></span><span></span><span></span></div> 
<div class="row"> 
<span></span><span></span><span></span><span></span> 
</div> 
<div class="row"> 
<span></span><span><span class="usr" id="456">學生一</span></span><span></span><span></span> 
</div> 
</div> 
<script type="text/javascript">var curTarget = null; //滑鼠拖拽的目標元素 
var curPos = null; 
var dropTarget = null; //要放下的目標元素 
var iMouseDown = false; //滑鼠是否按下 
var lMouseState = false; //前一個iMouseDown狀態 
var dragreplaceCont = []; 
var mouseOffset = null; 
var callbackFunc = null; 
Number.prototype.NaN0 = function() { return isNaN(this) ? 0 : this; } 
function setdragreplace(obj, callback) { 
dragreplaceCont.push(obj); 
obj.setAttribute('candrag', '1'); 
if (callback != null && typeof (callback) == 'function') { 
callbackFunc = callback; 
} 
} 
//滑鼠移動 
function mouseMove(ev) { 
ev = ev || window.event; 
var target = ev.target || ev.srcElement; 
var mousePos = mouseCoords(ev); 
//如果當前元素可拖拽 
var dragObj = target.getAttribute('candrag'); 
if (dragObj != null) { 
if (iMouseDown && !lMouseState) { 
//剛開始拖拽 
curTarget = target; 
curPos = getPosition(target); 
mouseOffset = getMouseOffset(target, ev); 
// 清空輔助層 
for (var i = 0; i < dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]); 
//克隆元素到輔助層，並移動到滑鼠位置 
dragHelper.appendChild(curTarget.cloneNode(true)); 
dragHelper.style.display = 'block'; 
dragHelper.firstChild.removeAttribute('candrag'); 
//記錄拖拽元素的位置資訊 
curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth)); 
curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight)); 
curTarget.style.display = 'none'; 
//記錄每個可接納元素的位置資訊，這裡一次記錄以後多次呼叫，獲取更高效能 
for (var i = 0; i < dragreplaceCont.length; i++) { 
with (dragreplaceCont[i]) { 
if (dragreplaceCont[i] == curTarget) 
continue; 
var pos = getPosition(dragreplaceCont[i]); 
setAttribute('startWidth', parseInt(offsetWidth)); 
setAttribute('startHeight', parseInt(offsetHeight)); 
setAttribute('startLeft', pos.x); 
setAttribute('startTop', pos.y); 
} 
} //記錄end 
} //剛開始拖拽end 
} 
//正在拖拽 
if (curTarget != null) { 
// move our helper div to wherever the mouse is (adjusted by mouseOffset) 
dragHelper.style.top = mousePos.y - mouseOffset.y + "px"; 
dragHelper.style.left = mousePos.x - mouseOffset.x + "px"; 
//拖拽元素的中點 
var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) / 2); 
var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight')) / 2); 
var havedrop = false; 
for (var i = 0; i < dragreplaceCont.length; i++) { 
with (dragreplaceCont[i]) { 
if (dragreplaceCont[i] == curTarget) 
continue; 
if ((parseInt(getAttribute('startLeft')) < xPos) && 
(parseInt(getAttribute('startTop')) < yPos) && 
((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) && 
((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)) { 
havedrop = true; 
dropTarget = dragreplaceCont[i]; 
dropTarget.className = 'usr catch'; 
break; 
} 
} 
} 
if (!havedrop && dropTarget != null) { 
dropTarget.className = 'usr'; 
dropTarget = null; 
} 
} //正在拖拽end 
lMouseState = iMouseDown; 
if (curTarget) return false; //阻止其它響應（如：滑鼠框選文字） 
} 
//滑鼠鬆開 
function mouseUp(ev) { 
if (curTarget) { 
dragHelper.style.display = 'none'; //隱藏輔助層 
if (curTarget.style.display == 'none' && dropTarget != null) { 
//有元素接納，兩者互換 
var destP = dropTarget.parentNode; 
var sourceP = curTarget.parentNode; 
destP.appendChild(curTarget); 
sourceP.appendChild(dropTarget); 
dropTarget.className = 'usr'; 
dropTarget = null; 
if (callbackFunc != null) { 
callbackFunc(curTarget); 
} 
} 
curTarget.style.display = ''; 
curTarget.style.visibility = 'visible'; 
curTarget.setAttribute('candrag', '1'); 
} 
curTarget = null; 
iMouseDown = false; 
} 
//滑鼠按下 
function mouseDown(ev) { 
//記錄變數狀態 
iMouseDown = true; 
//獲取事件屬性 
ev = ev || window.event; 
var target = ev.target || ev.srcElement; 
if (target.onmousedown || target.getAttribute('candrag')) {//阻止其它響應（如：滑鼠雙擊文字） 
return false; 
} 
} 
//返回當前item相對頁面左上角的座標 
function getPosition(e) { 
var left = 0; 
var top = 0; 
while (e.offsetParent) { 
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0() : 0); 
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0() : 0); 
e = e.offsetParent; 
} 
left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0() : 0); 
top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0() : 0); 
return { x: left, y: top }; 
} 
//返回滑鼠相對頁面左上角的座標 
function mouseCoords(ev) { 
if (ev.pageX || ev.pageY) { 
return { x: ev.pageX, y: ev.pageY }; 
} 
return { 
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
y: ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 
} 
//滑鼠位置相對於item的偏移量 
function getMouseOffset(target, ev) { 
ev = ev || window.event; 
var docPos = getPosition(target); 
var mousePos = mouseCoords(ev); 
return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y }; 
} 
window.onload = function() { 
document.onmousemove = mouseMove; 
document.onmousedown = mouseDown; 
document.onmouseup = mouseUp; 
//輔助層用來顯示拖拽 
dragHelper = document.createElement('DIV'); 
dragHelper.style.cssText = 'position:absolute;display:none;'; 
document.body.appendChild(dragHelper); 
setdragreplace(document.getElementById('345')); 
setdragreplace(document.getElementById('123')); 
setdragreplace(document.getElementById('456')); 
}; 
</script> 
</body> 
</html>

轉自:http://www.jb51.net/article/20982.htm


相關文章