JavaScript 实现在网页上进行拖拽效果

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽.

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组.例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单：因为你可以很容易的实现!

网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标，第二你

<SCRIPT src="/uploadfile/webqd/drag_drop.js" type=text/javascript></SCRIPT><STYLE type=text/css>LI {MARGIN-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 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-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #669999 2px solid}.OverDragContainer {BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #669999 2px solid}.OverDragContainer {BACKGROUND-COLOR: #eee}.Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 5px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #000 1px solid; FONT-FAMILY: verdana,tahoma,arial; BACKGROUND-COLOR: #eee}.OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 5px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #000 1px solid; FONT-FAMILY: verdana,arial; BACKGROUND-COLOR: #eee}.DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 5px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #000 1px solid; FONT-FAMILY: verdana,arial; BACKGROUND-COLOR: #eee}.miniDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 5px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #000 1px solid; FONT-FAMILY: verdana,arial; BACKGROUND-COLOR: #eee}.OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BACKGROUND-COLOR: #ffff99}.DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {BACKGROUND-COLOR: #ffff99}.DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc}LEGEND {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana,arial}FIELDSET {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 3px; PADDING-TOP: 3px}.History {FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana,arial; HEIGHT: 82px}#DragContainer8 {BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #669999 1px solid; HEIGHT: 110px}.miniDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {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-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-B<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>OM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0}</STYLE><body><FIELDSET id=Demo4><LEGEND>样例- 拖拽<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>元素</LEGEND><DIV><DIV class=DragContainer id=DragContainer4 overclass=OverDragContainer><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item1 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #1</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item2 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #2</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item3 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #3</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item4 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #4</DIV></DIV><DIV class=DragContainer id=DragContainer5 overclass=OverDragContainer><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item5 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #5</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item6 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #6</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item7 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #7</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item8 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #8</DIV></DIV><DIV class=DragContainer id=DragContainer6 overclass=OverDragContainer><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item9 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #9</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item10 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #10</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item11 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #11</DIV><DIV class=Drag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> id=Item12 overclass=OverDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>dragclass=DragDrag<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>>Item #12</DIV></DIV></DIV></FIELDSET></body></html>
提示：可修改后代码再运行!

获取鼠标移动信息

第一我们需要获取鼠标的坐标．我们加一个用户函数到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>function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); document.getElementById('xxx').value = mousePos.x; document.getElementById('yyy').value = mousePos.y;}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 };}document.onmousemove = mouseMove;</script>Mouse X Position:<input id=xxx type=text><br>Mouse Y Position:<input id=yyy type=text></body></html>
提示：可修改后代码再运行!