怎么用javascript進(jìn)行拖拽第1/2頁(yè)

2024-09-06 12:45:14

字體：大中小

供稿：網(wǎng)友

本文譯自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版權(quán)歸原文所有

Javascript的特點(diǎn)是dom的處理與網(wǎng)頁(yè)效果，大多數(shù)情況我們只用到了這個(gè)語(yǔ)言的最簡(jiǎn)單的功能，比如制作圖片輪播/網(wǎng)頁(yè)的tab等等，這篇文章將向你展示如何在自己的網(wǎng)頁(yè)上制作拖拽．

有很多理由讓你的網(wǎng)站加入拖拽功能，最簡(jiǎn)單的一個(gè)是數(shù)據(jù)重組．例如：你有一個(gè)序列的內(nèi)容讓用戶排序，用戶需要給每個(gè)條目進(jìn)行輸入或者用select選擇，替代前面這個(gè)方法的就是拖拽．或許你的網(wǎng)站也需要一個(gè)用戶可以拖動(dòng)的導(dǎo)航窗口！那么這些效果都是很簡(jiǎn)單：因?yàn)槟憧梢院苋菀椎膶?shí)現(xiàn)！

網(wǎng)頁(yè)上實(shí)現(xiàn)拖拽其實(shí)也不是很復(fù)雜．第一你需要知道鼠標(biāo)坐標(biāo)，第二你需要知道用戶鼠標(biāo)點(diǎn)擊一個(gè)網(wǎng)頁(yè)元素并實(shí)現(xiàn)拖拽，最后我們要實(shí)現(xiàn)移動(dòng)這個(gè)元素．

<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}            </SPAN>
</div>
</div>
<div   id="u12rsuv"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="zzsjith"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-06/1562439.html'>鼠標(biāo)圖片振動(dòng)代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-06/1562441.html'>textarea是否自動(dòng)換行</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="tsjrru1"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說(shuō)嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學(xué)習(xí)交流