HTML中li中元素怎么改变位置,JS ul li 位置替换

var zIndex = 1; window.onload = function() {var oBox = document.getElementById("box");var aLi = oBox.getElementsByTagName("li");var aPos =[];var aData =[];for (i = 0; i < 15; i++)aData.push(i + 1);//插入结构

var oFragment =document.createDocumentFragment();for (i = 0; i < aData.length; i++) {var oLi = document.createElement("li");

oLi.innerText=i;

oFragment.appendChild(oLi)

}

oBox.appendChild(oFragment);//布局转换

for (i = 0; i < aLi.length; i++) {

aLi[i].index=i;

aLi[i].style.top= aLi[i].offsetTop + "px";

aLi[i].style.left= aLi[i].offsetLeft + "px";

aLi[i].style.margin= "0 5px 5px 0";

aPos.push({"left": aLi[i].offsetLeft,"top": aLi[i].offsetTop

})

}for (i = 0; i < aLi.length; i++) {

aLi[i].style.position= "absolute";

drag(aLi[i])

}//拖拽函数

functiondrag(obj, handle) {var handle = handle ||obj;

handle.style.cursor= "move";

handle.οnmοusedοwn= function(event) {var event = event ||window.event;var disX = event.clientX - this.offsetLeft;var disY = event.clientY - this.offsetTop;var oNear = null;

obj.style.zIndex= zIndex++;

document.οnmοusemοve= function(event) {var event = event ||window.event;var iL = event.clientX -disX;var iT = event.clientY -disY;var maxL = obj.parentNode.clientWidth -obj.offsetWidth;var maxT = obj.parentNode.clientHeight -obj.offsetHeight;

iL< 0 && (iL = 0);

iT< 0 && (iT = 0);

iL> maxL && (iL =maxL);

iT> maxT && (iT =maxT);

obj.style.left= iL + "px";

obj.style.top= iT + "px";for (i = 0; i < aLi.length; i++) aLi[i].className = "";

oNear=findNearest(obj);

oNear&& (oNear.className = "hig");return false};

document.οnmοuseup= function() {

document.οnmοusemοve= null;

document.οnmοuseup= null;if(oNear) {var tIndex =obj.index;

obj.index=oNear.index;

oNear.index=tIndex;

startMove(obj, aPos[obj.index]);

startMove(oNear, aPos[oNear.index],function() {

});

oNear.className= "";

}else{

startMove(obj, aPos[obj.index])

}

handle.releaseCapture&&handle.releaseCapture()

};this.setCapture && this.setCapture();return false}

}//找出相遇点中最近的元素

functionfindNearest(obj) {var filterLi =[];var aDistance =[];for (i = 0; i < aLi.length; i++) aLi[i] != obj && (isButt(obj, aLi[i]) &&(aDistance.push(getDistance(obj, aLi[i])), filterLi.push(aLi[i])));var minNum =Number.MAX_VALUE;var minLi = null;for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minLi =filterLi[i]);returnminLi

}

};//求两点之间的距离

functiongetDistance(obj1, obj2) {var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);return Math.sqrt(a * a + b *b)

}//碰撞检测

functionisButt(obj1, obj2) {var l1 =obj1.offsetLeft;var t1 =obj1.offsetTop;var r1 = obj1.offsetLeft +obj1.offsetWidth;var b1 = obj1.offsetTop +obj1.offsetHeight;var l2 =obj2.offsetLeft;var t2 =obj2.offsetTop;var r2 = obj2.offsetLeft +obj2.offsetWidth;var b2 = obj2.offsetTop +obj2.offsetHeight;return !(r1 < l2 || b1 < t2 || r2 < l1 || b2

}//获取最终样式

functiongetStyle(obj, attr) {return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])

}//运动框架

functionstartMove(obj, pos, onEnd) {

clearInterval(obj.timer);

obj.timer= setInterval(function() {

doMove(obj, pos, onEnd)

},30)

}functiondoMove(obj, pos, onEnd) {var iCurL = getStyle(obj, "left");var iCurT = getStyle(obj, "top");var iSpeedL = (pos.left - iCurL) / 5;var iSpeedT = (pos.top - iCurT) / 5;

iSpeedL= iSpeedL > 0 ?Math.ceil(iSpeedL) : Math.floor(iSpeedL);

iSpeedT= iSpeedT > 0 ?Math.ceil(iSpeedT) : Math.floor(iSpeedT);if (pos.left == iCurL && pos.top ==iCurT) {

clearInterval(obj.timer);

onEnd&&onEnd()

}else{

obj.style.left= iCurL + iSpeedL + "px";

obj.style.top= iCurT + iSpeedT + "px";

}

}