您當前位置：首頁 > web前端 > jscript > JavaScript 實現在網頁上進行拖拽效果

JavaScript 實現在網頁上進行拖拽效果

來源：程序員人生發布時間：2014-04-16 14:17:18 閱讀次數：2737次

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

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

網頁上實現拖拽其實也不是很復雜.第一你需要知道鼠標坐標，第二你

<SCRIPT src="/uploadfile/webqd/drag_drop.js" type=text/javascript></SCRIPT><STYLE type=text/css>LI {MARGIN-BOTTOM: 10px}OL {MARGIN-TOP: 5px}.DragContainer {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}.OverDragContainer {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}.OverDragContainer {BACKGROUND-COLOR: #eee}.DragBox {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}.OverDragBox {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}.DragDragBox {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}.miniDragBox {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}.OverDragBox {BACKGROUND-COLOR: #ffff99}.DragDragBox {BACKGROUND-COLOR: #ffff99}.DragDragBox {FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc}LEGEND {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial}FIELDSET {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px}.History {FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px}#DragContainer8 {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}.miniDragBox {FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px}PRE {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}</STYLE><body><FIELDSET id=Demo4><LEGEND>樣例- 拖拽頁面元素</LEGEND><DIV><DIV class=DragContainer id=DragContainer4 overclass="OverDragContainer"><DIV class=DragBox id=Item1 overclass="OverDragBox"dragclass="DragDragBox">Item #1</DIV><DIV class=DragBox id=Item2 overclass="OverDragBox"dragclass="DragDragBox">Item #2</DIV><DIV class=DragBox id=Item3 overclass="OverDragBox"dragclass="DragDragBox">Item #3</DIV><DIV class=DragBox id=Item4 overclass="OverDragBox"dragclass="DragDragBox">Item #4</DIV></DIV><DIV class=DragContainer id=DragContainer5 overclass="OverDragContainer"><DIV class=DragBox id=Item5 overclass="OverDragBox"dragclass="DragDragBox">Item #5</DIV><DIV class=DragBox id=Item6 overclass="OverDragBox"dragclass="DragDragBox">Item #6</DIV><DIV class=DragBox id=Item7 overclass="OverDragBox"dragclass="DragDragBox">Item #7</DIV><DIV class=DragBox id=Item8 overclass="OverDragBox"dragclass="DragDragBox">Item #8</DIV></DIV><DIV class=DragContainer id=DragContainer6 overclass="OverDragContainer"><DIV class=DragBox id=Item9 overclass="OverDragBox"dragclass="DragDragBox">Item #9</DIV><DIV class=DragBox id=Item10 overclass="OverDragBox"dragclass="DragDragBox">Item #10</DIV><DIV class=DragBox id=Item11 overclass="OverDragBox"dragclass="DragDragBox">Item #11</DIV><DIV class=DragBox id=Item12 overclass="OverDragBox"dragclass="DragDragBox">Item #12</DIV></DIV></DIV></FIELDSET></body></html>
提示：可修改后代碼再運行!

獲取鼠標移動信息

第一我們需要獲取鼠標的坐標．我們加一個用戶函數到document.onmousemove就可以了:

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 倒計時搶購JS代碼，結束有提示已結束

下一篇 JavaScript for…in 循環的陷阱

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript 實現在網頁上進行拖拽效果