<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽div</title>
<style type="text/css">
div{
 position:absolute;
 width:150px;
 height:150px;
 background-color:#C8FFFF;
}
</style>
<script type="text/javascript">
<!--
function drag(obj)
{
 if (typeof obj == "string") {
 var obj = document.getElementById(obj);
 obj.orig_index=obj.style.zIndex;
 //設(shè)置當(dāng)前對(duì)象永遠(yuǎn)顯示在最上層
 }
 obj.onmousedown=function (a){
 //鼠標(biāo)按下
 this.style.cursor="move";
 //設(shè)置鼠標(biāo)樣式
 this.style.zIndex=1000;
  var d=document;
 if(!a) a=window.event;
 //按下時(shí)創(chuàng)建一個(gè)事件
 var x=a.clientX-document.body.scrollLeft-obj.offsetLeft;
 //x=鼠標(biāo)相對(duì)于網(wǎng)頁(yè)的x坐標(biāo)-網(wǎng)頁(yè)被卷去的寬-待移動(dòng)對(duì)象的左外邊距
 var y=a.clientY-document.body.scrollTop-obj.offsetTop;
 //y=鼠標(biāo)相對(duì)于網(wǎng)頁(yè)的y左邊-網(wǎng)頁(yè)被卷去的高-待移動(dòng)對(duì)象的左上邊距
 d.onmousemove=function(a){//鼠標(biāo)移動(dòng)
  if(!a) a=window.event;//移動(dòng)時(shí)創(chuàng)建一個(gè)事件
  obj.style.left=a.clientX+document.body.scrollLeft-x;
  obj.style.top=a.clientY+document.body.scrollTop-y;
 }
 d.onmouseup=function (){//鼠標(biāo)放開
  document.onmousemove=null;
  document.onmouseup = null;
  obj.style.cursor="normal";//設(shè)置放開的樣式
  obj.style.zIndex=obj.orig_index;
 }
 } 
}
-->
</script>
</head>
<body>
<div id="div1">&nbsp;</div>
<div id="div2" style="left:170px; background-color:#408080"></div>
<script type="text/javascript">
<!--
 drag("div1");
 drag("div2");
-->
</script>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

利用Javascript獲取選擇文本所在的句子詳解
這篇文章主要給大家愛介紹了關(guān)于利用Javascript獲取選擇文本所在的句子的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧。
2017-12-12
js 鏈?zhǔn)窖舆t執(zhí)行DOME
js 鏈?zhǔn)窖舆t執(zhí)行DOME，需要的朋友可以參考下。
2012-01-01
js實(shí)現(xiàn)復(fù)選框的全選和取消全選效果
在很多網(wǎng)站都有這樣的功能，當(dāng)點(diǎn)擊一個(gè)全選按鈕之后，所有的復(fù)選框都會(huì)被選中，再點(diǎn)擊之后會(huì)取消全選，功能非常的人性化，可以省卻很多人力，本文將簡(jiǎn)單介紹一下JS如何實(shí)現(xiàn)此功能
2017-01-01
求js數(shù)組的最大值和最小值的四種方法
本篇文章主要介紹了求js數(shù)組的最大值和最小值的四種方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
分享11個(gè)常用JavaScript小技巧
在我們的日常開發(fā)過程中，我們經(jīng)常會(huì)遇到數(shù)字與字符串轉(zhuǎn)換，檢查對(duì)象中是否存在對(duì)應(yīng)值，條件性操作對(duì)象數(shù)據(jù)，過濾數(shù)組中的錯(cuò)誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡
2022-06-06
微信小程序云開發(fā)（數(shù)據(jù)庫(kù)）詳解
使用云開發(fā)開發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)數(shù)據(jù)庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的，很早以前的文章了，不過內(nèi)容還是不錯(cuò)的，如果想要更多的效果，可以去腳本之家搜下。
2009-12-12
JavaScript前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請(qǐng)求的并發(fā)數(shù),即限制同一時(shí)間內(nèi)進(jìn)行處理的請(qǐng)求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對(duì)大家有所幫助
2023-12-12
javascript去掉代碼里面的注釋
這篇文章主要介紹了javascript去掉代碼里面的注釋的方法和具體代碼，有需要的小伙伴可以參考下。
2015-07-07
利用JS實(shí)現(xiàn)文字的聚合動(dòng)畫效果
這篇文章主要給大家介紹了利用JS如何實(shí)現(xiàn)文字的聚合動(dòng)畫效果，實(shí)現(xiàn)的效果非常不錯(cuò)，類似粒子動(dòng)畫的效果，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01