图片拖拽互换源码修改

<!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">   
<title>JK</title>   
<style>   
.removableObj{   
    width:48px;height:48px;position:relative;
    border:1px #cccccc solid;
    background:#ffffff;
    float:left;
}   
</style> 
</head>       
<body>   
<div onmouseover="MouseOverFun2(this);" style="height:48px;width:200px;">
<script>   
var   beginMoving=false;   
var   sourceObj=null;   
var   objectObj=null;   
var   objectObj2=null;  

function MouseDownToMove(obj){   
obj.style.zIndex=1;   
obj.mouseDownY=event.clientY;   
obj.mouseDownX=event.clientX;   
beginMoving=true;   
obj.setCapture();   
sourceObj=obj;   
objectObj=null;   
}   

function MouseMoveToMove(obj){   
if(!beginMoving)   return   false;   
obj.style.top   =   (event.clientY-obj.mouseDownY);   
obj.style.left   =   (event.clientX-obj.mouseDownX);   
}  

function MouseUpToMove(obj){   
if(!beginMoving)   return   false;   
obj.releaseCapture();   
obj.style.top=0;   
obj.style.left=0;   
obj.style.zIndex=0;   
beginMoving=false;   
window.setTimeout("swapFun()",20);   
}   

function MouseOverFun(obj){   
if(obj==sourceObj) return false;   
objectObj=obj;   
}   

function MouseOverFun2(obj){   
objectObj2=obj;   
}   

function swapFun(){  

if(sourceObj!=null&&objectObj!=null) {
   var nextObj=sourceObj.nextSibling
   if(nextObj==objectObj){
nextObj=sourceObj.nextSibling.nextSibling
nextObj.insertAdjacentElement("beforeBegin",sourceObj);   
return
   }else
objectObj.insertAdjacentElement("beforeBegin",sourceObj);   
   if(nextObj==null)
objectObj.parentNode.appendChild(objectObj);
   else
nextObj.insertAdjacentElement("beforeBegin",objectObj);
}else if(sourceObj!=null&&objectObj2!=null){ 
   objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
}
sourceObj=null;   
objectObj=null;   
objectObj2=null;   
}  


for(var i=1;i<=7;i++){
document.write('<div class="removableObj" onmousedown="MouseDownToMove(this)"   onmousemove="MouseMoveToMove(this)"   onmouseup="MouseUpToMove(this);" onmouseover="MouseOverFun(this);"><img src="'+i+'.gif"/></div>');
}
</script></div>
</body>   
</html> 我的图片拖拽怎么不能互换啊，望高手指点

解决方案 »

  1.   

    不是很明白你的意思是什么。什么叫互换从代码上看down-move-up-over好像只是实现一个拖动。前面的代码没看。
    你是想拖动一张，然后鼠标放开，点击另一张也可以拖动？
      

  2.   

    干吗要互换源码？你要的效果是不是交换位置？像 igoogle、qq空间那样？
      

  3.   

    <!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">   
      <title>JK</title>   
      <style>   
      .removableObj{   
        width:48px;height:48px;position:relative;
        border:1px #cccccc solid;
        background:#ffffff;
        float:left;
      }   
      </style> 
      </head>       
    <body>   
    <div onmouseover="MouseOverFun2(this);" style="height:48px;width:200px;"><script   language="javascript">   
    var   beginMoving=false;   
    var   sourceObj=null;   
    var   objectObj=null;   
    var   objectObj2=null;   function MouseDownToMove(obj){   
        obj.style.zIndex=1;   
        obj.mouseDownY=event.clientY;   
        obj.mouseDownX=event.clientX;   
        beginMoving=true;   
        obj.setCapture();   
        sourceObj=obj;   
        objectObj=null;   
    }   
        
    function MouseMoveToMove(obj){   
        if(!beginMoving)   return   false;   
        obj.style.top   =   (event.clientY-obj.mouseDownY);   
        obj.style.left   =   (event.clientX-obj.mouseDownX);   
    }   function MouseUpToMove(obj){   
        if(!beginMoving)   return   false;   
        obj.releaseCapture();   
        obj.style.top=0;   
        obj.style.left=0;   
        obj.style.zIndex=0;   
        beginMoving=false;   
        window.setTimeout("swapFun()",20);   
    }   
        
    function MouseOverFun(obj){   
        if(obj==sourceObj) return false;   
        objectObj=obj;   
    }   
        
    function MouseOverFun2(obj){   
        objectObj2=obj;   
    }   
        
    function swapFun(){   
    var nextObj = sourceObj.nextSibling;
        if(sourceObj!=null&&objectObj!=null) {
    var noo = objectObj.nextSibling;
    sourceObj.parentNode.insertBefore(objectObj, nextObj);
    sourceObj.parentNode.insertBefore(sourceObj, noo);
    }
        sourceObj=null;   
        objectObj=null;   
        objectObj2=null;   
    }   for(var i=1;i<=16;i++){
        document.write('<div class="removableObj" onmousedown="MouseDownToMove(this)"   onmousemove="MouseMoveToMove(this)"   onmouseup="MouseUpToMove(this);" onmouseover="MouseOverFun(this);"><img src="'+i+'.jpg"/>'+i+'</div>');
    }
    </script></div>
      </body>   
      </html>   
      

  4.   

    谢谢枯井，但是我想要的是图片互换不是div互换，这个可以做到吗？我可以另开帖给你分