JS實現拖拽代碼

m47c 9年前發布 | 4K 次閱讀 JavaScript 

    ////html的代碼說明：

    ////定義了一個table，用于測試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>  </pre> 






    ////js代碼說明：  
    ////currentMoveObj ：全局對象，記錄當前拖拽的那個對象  
    ////var relLeft;：鼠標按下時的橫坐標  
    ////var relTop;鼠標按下時的縱坐標  
 



<script type="text/javascript">

var currentMoveObj = null;

var relLeft;

var relTop;


////summary

////當按下鼠標時，記錄當前點擊的坐標，記錄當前拖拽的對象

function mouseDown(obj)

{

currentMoveObj =obj;

currentMoveObj.setCapture();

currentMoveObj.style.position = "absolute";

relLeft = event.x - currentMoveObj.style.pixelLeft;

relTop = event.y - currentMoveObj.style.pixelTop;

}

 /////當鼠標松開時，當前拖拽對象置空

window.document.attachEvent

('onmouseup',function()

{

currentMoveObj.releaseCapture();

currentMoveObj = null;

});

 ////拖拽時，始終更新當前拖拽對象的坐標即可

function mouseMove()

{

if(null != currentMoveObj)

{

currentMoveObj.style.pixelLeft = event.x - relLeft;

currentMoveObj.style.pixelTop = event.y - relTop;

}

}


////為每一個TABLE對象注冊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> </pre> 



    <p>JS拖拽</p>  
    </body>  
    </html>
 本文由用戶 m47c 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！