javascript之鼠标拖动位置互换效果代码

　　鼠标拖动，位置互换效果，主要用于div，提高用户体验等方面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<style type="text/css"> 
div.box{ 
position:relative; 
padding:5px; 
background-color:#000; 
width:300px; 
height:300px; 
overflow:hidden; 
} 
div.box div.item{ 
float:left; 
width:90px; 
height:90px; 
background-color:#ccc; 
margin:5px; 
position:relative; 
cursor:pointer; 
} 
div.mask{ 
    width:90px; 
    height:90px; 
    background-color:#f00; 
    opacity:0.8; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
    position:absolute; 
    visibility:hidden; 
    top:20px; 
    left:20px; 
    z-index:10; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20darg%20%3D%20%7B%20%0D%0A%20%20%20%20target%20%3A%20null%2C%20%0D%0A%20%20%20%20ox%20%3A%200%2C%20%0D%0A%20%20%20%20oy%20%3A%200%20%0D%0A%7D%3B%20%0D%0Avar%20box%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Abox.className%20%3D%20%22box%22%3B%20%0D%0Avar%20mask%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Amask.className%20%3D%20%22mask%22%3B%20%0D%0Abox.appendChild(mask)%3B%20%0D%0Afor(var%20i%20%3D%200%3B%20i%20%3C%209%3B%20i%20%2B%2B)%7B%20%0D%0A%20%20%20%20var%20item%20%3D%20document.createElement(%22div%22)%3B%20%0D%0A%20%20%20%20item.className%20%3D%20%22item%22%3B%20%0D%0A%20%20%20%20item.appendChild(document.createTextNode(i%20%2B%201))%3B%20%0D%0A%20%20%20%20item.onmousedown%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20arguments%5B0%5D%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20e.target%20%7C%7C%20e.srcElement%3B%20%0D%0A%20%20%20%20%20%20%20%20darg.target%20%3D%20o%3B%20%0D%0A%20%20%20%20%20%20%20%20mask.style%5B%22top%22%5D%20%3D%20o.offsetTop%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20mask.style%5B%22left%22%5D%20%3D%20o.offsetLeft%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20mask.style%5B%22visibility%22%5D%20%3D%20%22visible%22%3B%20%0D%0A%20%20%20%20%20%20%20%20darg.ox%20%3D%20e.clientX%20-%20mask.offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20darg.oy%20%3D%20e.clientY%20-%20mask.offsetTop%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20box.appendChild(item)%3B%20%0D%0A%7D%20%0D%0Adocument.body.appendChild(box)%3B%20%0D%0Afunction%20getItem(x%2Cy)%7B%20%0D%0A%20%20%20%20x%20%3D%20x%20-%20box.offsetLeft%3B%20%0D%0A%20%20%20%20y%20%3D%20y%20-%20box.offsetTop%3B%20%0D%0A%20%20%20%20var%20o%20%3D%20box.childNodes%5B(3%20-%20parseInt((box.offsetWidth%20-%20x)%2F100)%20%2B%20(2%20-%20parseInt((box.offsetHeight%20-%20y)%2F100))%20*%203)%5D%3B%20%0D%0A%20%20%20%20var%20n%20%3D%20darg.target.nextSibling%3B%20%0D%0A%20%20%20%20var%20on%20%3D%20o.nextSibling%3B%20%0D%0A%20%20%20%20box.insertBefore(o%2Cn)%3B%20%0D%0A%20%20%20%20box.insertBefore(darg.target%2Con)%3B%20%0D%0A%7D%20%0D%0Adocument.onmousemove%20%3D%20function()%7B%20%0D%0A%20%20%20%20if(darg.target%20!%3D%20null%20%26%26%20darg.target.nodeType%20%3D%3D%201)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20arguments%5B0%5D%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20mask.style%5B%22left%22%5D%20%3D%20e.clientX%20-%20darg.ox%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20mask.style%5B%22top%22%5D%20%3D%20e.clientY%20-%20darg.oy%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Abox.onmouseup%20%3D%20function()%7B%20%0D%0A%20%20%20%20if(darg.target%20!%3D%20null%20%26%26%20darg.target.nodeType%20%3D%3D%201)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20arguments%5B0%5D%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%20%3D%20e.target%20%7C%7C%20e.srcElement%3B%20%0D%0A%20%20%20%20%20%20%20%20getItem(e.clientX%2Ce.clientY)%3B%20%0D%0A%20%20%20%20%20%20%20%20darg.target%20%3D%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Adocument.onmouseup%20%3D%20function()%7B%20%0D%0A%20%20%20%20darg.target%20%3D%20null%3B%20%0D%0A%20%20%20%20mask.style%5B%22visibility%22%5D%20%3D%20%22hidden%22%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程