中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

JS實(shí)現(xiàn)拖拽代碼

2018-07-20    來(lái)源：open-open

容器云強(qiáng)勢(shì)上線！快速搭建集群，上萬(wàn)Linux鏡像隨意使用 
    ////html的代碼說(shuō)明：  
    ////定義了一個(gè)table，用于測(cè)試js拖拽功能  
    <html>  
    <head>  
    <script type="text/javascript" >  
       
    </script>  
    </head>  
    <body>  
    <table width="100px" height="100px"   bgcolor="blue" style='left:120 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px"   bgcolor="yellow"  style='left:280 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>dsa<td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px" bgcolor="green"  style='left:400 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px"  bgcolor="gray"  style='left:520 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <tr>  
    <td>  
    </tr>  
    </table>  

    ////js代碼說(shuō)明：  
    ////currentMoveObj ：全局對(duì)象，記錄當(dāng)前拖拽的那個(gè)對(duì)象  
    ////var relLeft;：鼠標(biāo)按下時(shí)的橫坐標(biāo)  
    ////var relTop;鼠標(biāo)按下時(shí)的縱坐標(biāo)  

<script type="text/javascript">  
var currentMoveObj = null;  
var relLeft;  
var relTop;  
   
////summary  
////當(dāng)按下鼠標(biāo)時(shí)，記錄當(dāng)前點(diǎn)擊的坐標(biāo)，記錄當(dāng)前拖拽的對(duì)象  
function mouseDown(obj)  
{  
currentMoveObj =obj;  
currentMoveObj.setCapture();  
currentMoveObj.style.position = "absolute";  
relLeft = event.x - currentMoveObj.style.pixelLeft;  
relTop = event.y - currentMoveObj.style.pixelTop;  
}  
 /////當(dāng)鼠標(biāo)松開時(shí)，當(dāng)前拖拽對(duì)象置空  
window.document.attachEvent  
('onmouseup',function()  
{  
currentMoveObj.releaseCapture();  
currentMoveObj = null;  
});  
 ////拖拽時(shí)，始終更新當(dāng)前拖拽對(duì)象的坐標(biāo)即可  
function mouseMove()  
{  
if(null != currentMoveObj)  
{  
currentMoveObj.style.pixelLeft = event.x - relLeft;  
currentMoveObj.style.pixelTop = event.y - relTop;  
}  
}  
   
 ////為每一個(gè)TABLE對(duì)象注冊(cè)mousedown和mousemove事件  
var elements = document.getElementsByTagName("table");  
window.onload=function () {  
for(var i = 0;i < elements.length;i ++)  
{  
var obj = elements[i];  
attachDragAction(obj);  
}  
};  
   
function attachDragAction(obj) {  
obj.onmousedown= function(){ mouseDown(obj)};  
obj.onmousemove= function(){ mouseMove()};  
}  
</script> 

    <p>JS拖拽</p>  
    </body>  
    </html>

標(biāo)簽： 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。

上一篇:java swing 小游戲 貪吃蛇

下一篇:js 判斷圖片是否加載完成