JavaScript:Div层拖动效果实例代码

差异层拖动效果图：

实现：CSS:复制代码代码如下：样式div {位置：相对；}/styleJS:复制代码代码如下：脚本类型=' text/JavaScript ' var鼠标悬停=true var xcoorvar ycoor函数坐标(){ if(event。加速。身份证。indexof(' wish broad '==0){ event。加速。风格。zindex=1000mouseover=truepleft=event。srcelelement。风格。pixelleftptop=事件。加速。风格。像素顶部；xcoor=event . clientxycoor=event . clientydocument。onmousemove=移动图像；} }函数move image(){ if(mouse oververent。button==1){ event。加速。风格。pixelleft=pleft事件。客户x-xco or；事件。加速。风格。pixeltp=ptop事件。clienty-y cor；返回false} }函数鼠标向上(){事件。加速。风格。Zin dex=1；mouse over=false } document . onmousedown=坐标；document . onmouseup=mouse up/script HTMl:复制代码代码如下：htmlheadDiv层拖动/header dydiv id=' wisbroad1 ' style=' width :200 px；高度：100 pxborder:1px纯黑；背景：灰色'中国/div div id=' wisbroad 2 ' style=' width :200 px；高度：100 pxborder:1px纯红；背景：红色'美国/div div id=' wisbroad3 ' style=' width :200 px；高度：100 pxborder:1px纯红；背景：绿色'日本/div div id=' wisbroad 4 ' style=' width :200 px；高度：100 pxborder:1px纯红；背景：粉色'巴西/div/body/html