麻烦帮忙写个拖动层排序嘛。

<!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>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
*{ margin:0px; padding:0px}
body{height:500px; text-align:center;}
.con{float:left;width:100px;margin:0px; height:100px; border: 1px dotted red}
.con h1{font-size:12px ;font-weight:bold;height:25px;line-height:25px; background:#cbcbcb;cursor:move;}
#end{visibility:hidden;}
#content{width:430px;margin:20px auto;height:500px;border: 1px dashed green}
     </style>  </head>
  <body>
<div id="content">
<div id="a1aa" class="con"><h1>a1<div>bb</div></h1></div>
<div id="a2" class="con"><h1>a2</h1></div>
<div id="a3" class="con"><h1>a3</h1></div>
<div id="a4" class="con"><h1>A4</h1></div>
<div id="a5" class="con"><h1>a5</h1></div>
<div id="a6" class="con"><h1>a6</h1></div>
<div id="a7" class="con"><h1>a7</h1></div>
<div id="a8" class="con"><h1>a8</h1></div>
<div id="a9" class="con"><h1>a9</h1></div>
<div id="a10" class="con"><h1>a10</h1></div>
<div id="a11" class="con"><h1>a11</h1></div>
<div id="a12" class="con"><h1>a12</h1></div>
</div>
<input type="button" value="save" id="Sbt" />
<input type="button" value="add" onclick="add()" />
  </body>
</html>
<script type="text/javascript">
function add(){
var content = document.getElementById('content');
content.innerHTML+="<div id='a13' class='con'><h1>a13</h1></div>"
DragDrop_Sort($("content"),"div");
}
function XmouseCoords(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
};
}
function XgetMouseOffset(target, ev){
ev = ev || window.event; var docPos=XgetPosition(target);
var mousePos  = XmouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}function XgetPosition(e){ var left = 0;
var top  = 0; while(e.offsetParent){
left += e.offsetLeft;
top  += e.offsetTop;
e= e.offsetParent;
} left += e.offsetLeft;
top  += e.offsetTop; return {x:left, y:top};
}
var $=function(){return document.getElementById(arguments[0])
}/*拖动时判断位置的层*/
var HelperDiv=document.createElement("div");
    document.body.appendChild(HelperDiv);
with(HelperDiv.style){
display="none";
position="absolute";
cursor="move";
}
function XCapture(o,mak){
    if(mak=="start"){
  if(o.setCapture){o.setCapture();}
  else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}
if(mak=="end"){
  if(o.releaseCapture){o.releaseCapture();}
  else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}

}
/*移动*/
function Xmove(o,l,t){
  o.style.position="absolute";
  var a=1;
  var ol=parseInt(o.offsetLeft);
  var ot=parseInt(o.offsetTop);
  var iTimer=setInterval(function(){
   if(a==10)
    {   HelperDiv.style.display="none";
clearInterval(iTimer);
}
   o.style.left=ol+a*(l-ol)/10+"px";
   o.style.top=ot+a*(t-ot)/10+"px";
   a++;
},20);
}
function Odrag (obj) {
     var Xid=0;//判断是否有匹配的元素 0：无 Ł：有
var tDiv=null;//如果有匹配动态创建元素
var om={}
om.sortBox=obj.getAttribute("SortBox");//sort 的容器
om.state=obj.getAttribute("state");//鼠标状态 ŀ：up 1 ：down
om.obj=obj;//移动的对象
om.dragObj=obj.getAttribute("dragObj");//需要改变位置元素鼠标按下时的 esrcElement
var E_X=obj.getAttribute("E_X");
var E_Y=obj.getAttribute("E_Y"); XCapture(om.obj,"start");
om.obj.onmouseup=function(){
XCapture(om.obj,"end");
om.state=0;
om.obj.releaseCapture();
if(Xid==1){
tDiv.id=om.dragObj.id
tDiv.innerHTML=om.obj.innerHTML;
om.dragObj.parentNode.removeChild(om.dragObj);
Xmove(om.obj,XgetPosition(tDiv).x,XgetPosition(tDiv).y);
SetSortObj(tDiv);
}
if(Xid==0){
om.dragObj.style.display="block";
Xmove(om.obj,XgetPosition(om.dragObj).x,XgetPosition(om.dragObj).y);
}
return ;
}
document.body.onmousemove=function(e){
var e=e||window.event;
if(om.state==1){
om.obj.style.left=XmouseCoords(e).x-E_X+"px";
om.obj.style.top=XmouseCoords(e).y-E_Y+"px";
var C_Y=XmouseCoords(e).y;
var C_X=XmouseCoords(e).x;
var oX=CheckPos (C_X,C_Y,GetPos(om.dragObj));
if(oX!=undefined){   if(Xid==0){
  tDiv=document.createElement("div");
  tDiv.className="con";
  tDiv.innerHTML=""
  tDiv.setAttribute("target",oX.obj);
  Xid=1;
  oX.obj.parentNode.insertBefore(tDiv,oX.obj);
}
}
else{

    if(Xid==1){
tDiv.getAttribute("target").style.display="block";
tDiv.parentNode.removeChild(tDiv);
tDiv=null;
}
Xid=0;
}
}

}
}
/*设置被拖动元素在点击事件发生时记录的信息*/
function SetSortObj(obj,box) {
            obj.setAttribute("isDrag","Sort")
obj.onmousedown=function(e){
var e=e||window.event;
HelperDiv.style.position="absolute";
this.style.display="none";
HelperDiv.style.display="block";
HelperDiv.innerHTML=obj.innerHTML;
HelperDiv.setAttribute("className","con");
HelperDiv.style.left=XgetPosition(this).x+"px";
HelperDiv.style.top=XgetPosition(this).y+"px";
HelperDiv.setAttribute("state",1);
HelperDiv.setAttribute("dragObj",obj);
HelperDiv.setAttribute("E_X",XgetMouseOffset(this,e).x);
HelperDiv.setAttribute("E_Y",XgetMouseOffset(this,e).y);
HelperDiv.setAttribute("SortBox",box);
Odrag(HelperDiv);
}}
/*得到容器内的所有节点的坐标*/
function GetPos (o) {
var Xlen=o.parentNode.getElementsByTagName("div");
var temp={};
for(var i=0;i<Xlen.length;i++){
if(Xlen[i].className=="con"&&Xlen[i]!=o){
    var te=Xlen[i];
temp[te.id]={
left:XgetPosition(te).x,
top:XgetPosition(te).y,
pos:i+1,
obj:te
}
}
}
return temp;
}
/*用当前鼠标坐标通容器内所有节点的坐标对比如果在范围内返回相关信息 */
function CheckPos (x,y,args) {
for(var o in args){
    var a=args[o]
if(a.left<x&&a.top<y&&a.left+a.obj.offsetWidth-20>x&&a.top+a.obj.offsetHeight-20>y){
         return a;
}
}
}
/*开始---设置容器拖动对象*/
function DragDrop_Sort(box,target){
var sortDiv=box.getElementsByTagName(target);
for(var i=0;i<sortDiv.length;i++){
SetSortObj(sortDiv[i],box);
}
}
/*设置容器内元素的位置*/
//DragDrop_Sort($("content"),"div");
$("Sbt").onclick=function(){
alert('a');
var temp=[];
var xx=$("content").getElementsByTagName("div");
for(var i=0;i<xx.length;i++){
xx[i].setAttribute("pos",i+1);
temp.push("id:"+xx[i].id+"  pos:"+xx[i].getAttribute("pos")+"\n");
}
alert(temp);}
</script>
像这种，但这种代码我放到我项目里，会出问题。。我也不知道，报了一堆错误。。因为项目页里引用了prototype.js这个的，把上面的放进出就出错了我想用发帖的那种改。谢谢
楼主参考这个
http://www.zuoxinwu.com/UserFiles/Demo-MoveableDiv.html

调试易

麻烦帮忙写个拖动层排序嘛。

解决方案 »