首頁 > 開發者 > JavaScript
本文示範如何將一張圖片用滑鼠拖拽到某個位置。
先看html代碼：
<html> <head> <title>drag demo</title> <script src="js/drag.js" type="text/javascript"></script> </head> <body onload="init()"> <div id="icon1" onmousedown="mouseDown(event)" style="left:1px; top: 1px; position: absolute;"> <img alt="" border="0" src="/img/2.jpg"></img> </div> </body></html>
注意，必須在style中指定三個屬性:
left,top屬性值可以為任意有效數值，position必須是absolute
為了便於擴充，將圖片封裝在div中，下面的JavaScript代碼其實是拖動div。
然後看看drag.js檔案：
function init() {window.document.onmousemove = mouseMove;window.document.onmouseup = mouseUp;window.document.ondragstart = mouseStop;}function mouseDown(e) {window.dragObj = e.currentTarget;if (window.dragObj !== null) {window.clickLeft = window.event.x - parseInt(dragObj.style.left);window.clickTop = window.event.y - parseInt(dragObj.style.top);window.dragObj.style.zIndex += 1;}}function mouseStop() {window.event.returnValue = false;}function mouseMove() {if (window.dragObj !== null ) {window.dragObj.style.left = window.event.x - window.clickLeft;window.dragObj.style.top = window.event.y - window.clickTop;}}function mouseUp() {window.dragObj = null;}
ondragStart事件被禁用。
主要就是mouseDown，mouseMove和mouseUp三個函數。
注意window.clickLeft和window.clickTop，它們是在點擊圖片的時候計算的，代表滑鼠在圖片裡的位置（距離圖片左上方的x和y值)。
它們用來保證在移動後滑鼠仍然停留在圖片的相對位置，通過將滑鼠的位置減去這兩個位移值。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
