用javascript進行拖拽1)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文譯自：http://www.webreference.com/programming/javascript/mk/column2/index.html
轉自：
http://www.blueidea.com/tech/web/2006/3791.asp
所有著作權歸原文所有

Javascript的特點是dom的處理與網頁效果，大多數情況我們只用到了這個語言的最簡單的功能，比如製作圖片輪播/網頁的tab等等，這篇文章將向你展示如何在自己的網頁上製作拖拽．

有很多理由讓你的網站加入拖拽功能，最簡單的一個是資料重組．例如：你有一個序列的內容讓使用者排序，使用者需要給每個條目進行輸入或者用select選擇，替代前面這個方法的就是拖拽．或許你的網站也需要一個使用者可以拖動的導航視窗！那麼這些效果都是很簡單：因為你可以很容易的實現！

網頁上實現拖拽其實也不是很複雜．第一你需要知道滑鼠座標，第二你需要知道使用者滑鼠點擊一個網頁元素並實現拖拽，最後我們要實現移動這個元素．

運行代碼框
<SCRIPT<br />src="/articleimg/2006/07/3791/drag_drop.js"<br />type=text/javascript></SCRIPT><br /><STYLE type=text/css>LI {<br />MARGIN-BOTTOM: 10px<br />}<br />OL {<br />MARGIN-TOP: 5px<br />}<br />.DragContainer {<br />BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid<br />}<br />.OverDragContainer {<br />BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid<br />}<br />.OverDragContainer {<br />BACKGROUND-COLOR: #eee<br />}<br />.DragBox {<br />BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee<br />}<br />.OverDragBox {<br />BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee<br />}<br />.DragDragBox {<br />BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee<br />}<br />.miniDragBox {<br />BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee<br />}<br />.OverDragBox {<br />BACKGROUND-COLOR: #ffff99<br />}<br />.DragDragBox {<br />BACKGROUND-COLOR: #ffff99<br />}<br />.DragDragBox {<br />FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc<br />}<br />LEGEND {<br />FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial<br />}<br />FIELDSET {<br />PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px<br />}<br />.History {<br />FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px<br />}<br />#DragContainer8 {<br />BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px<br />}<br />.miniDragBox {<br />FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px<br />}<br />PRE {<br />BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0<br />}<br /></STYLE><br /><body><br /><FIELDSET id=Demo4><LEGEND>範例- 拖拽頁面元素</LEGEND><br /><DIV><br /><DIV class=DragContainer id=DragContainer4 overclass="OverDragContainer"><br /><DIV class=DragBox id=Item1 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #1</DIV><br /><DIV class=DragBox id=Item2 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #2</DIV><br /><DIV class=DragBox id=Item3 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #3</DIV><br /><DIV class=DragBox id=Item4 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #4</DIV></DIV><br /><DIV class=DragContainer id=DragContainer5 overclass="OverDragContainer"><br /><DIV class=DragBox id=Item5 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #5</DIV><br /><DIV class=DragBox id=Item6 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #6</DIV><br /><DIV class=DragBox id=Item7 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #7</DIV><br /><DIV class=DragBox id=Item8 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #8</DIV></DIV><br /><DIV class=DragContainer id=DragContainer6 overclass="OverDragContainer"><br /><DIV class=DragBox id=Item9 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #9</DIV><br /><DIV class=DragBox id=Item10 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #10</DIV><br /><DIV class=DragBox id=Item11 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #11</DIV><br /><DIV class=DragBox id=Item12 overclass="OverDragBox"<br />dragclass="DragDragBox">Item #12</DIV></DIV></DIV></FIELDSET><br /></body><br /></html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

擷取滑鼠移動資訊

第一我們需要擷取滑鼠的座標．我們加一個使用者函數到document.onmousemove就可以了:

document.onmousemove = mouseMove;

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
}
return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

運行代碼框
<script><br />function mouseMove(ev){<br />ev = ev || window.event;<br />var mousePos = mouseCoords(ev);<br />document.getElementById('xxx').value = mousePos.x;<br />document.getElementById('yyy').value = mousePos.y;<br />}<br />function mouseCoords(ev){<br />if(ev.pageX || ev.pageY){<br />return {x:ev.pageX, y:ev.pageY};<br />}<br />return {<br />x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br />y:ev.clientY + document.body.scrollTop - document.body.clientTop<br />};<br />}<br />document.onmousemove = mouseMove;<br /></script>Mouse X Position:<br /><input id=xxx type=text><br /><br>Mouse Y Position:<br /><input id=yyy type=text><br /></body><br /></html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More