js實現(xiàn)簡單div拖拽功能實例

更新時間：2015年05月12日 14:46:11 作者：vivi

這篇文章主要介紹了js實現(xiàn)簡單div拖拽功能的方法,實例分析了javascript針對div層拖拽的實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了js實現(xiàn)簡單div拖拽功能的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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è)置當前對象永遠顯示在最上層
 }
 obj.onmousedown=function (a){
 //鼠標按下
 this.style.cursor="move";
 //設(shè)置鼠標樣式
 this.style.zIndex=1000;
  var d=document;
 if(!a) a=window.event;
 //按下時創(chuàng)建一個事件
 var x=a.clientX-document.body.scrollLeft-obj.offsetLeft;
 //x=鼠標相對于網(wǎng)頁的x坐標-網(wǎng)頁被卷去的寬-待移動對象的左外邊距
 var y=a.clientY-document.body.scrollTop-obj.offsetTop;
 //y=鼠標相對于網(wǎng)頁的y左邊-網(wǎng)頁被卷去的高-待移動對象的左上邊距
 d.onmousemove=function(a){//鼠標移動
  if(!a) a=window.event;//移動時創(chuàng)建一個事件
  obj.style.left=a.clientX+document.body.scrollLeft-x;
  obj.style.top=a.clientY+document.body.scrollTop-y;
 }
 d.onmouseup=function (){//鼠標放開
  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>

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

您可能感興趣的文章:

相關(guān)文章

javascript下動態(tài)this與動態(tài)綁定實例代碼
javascript是一門動態(tài)語言，最明顯就是那個dynamic this。它一般都是作為函數(shù)調(diào)用者存在。在javascript，所有關(guān)系都可以作為對象的一個關(guān)聯(lián)數(shù)組元素而存在。
2010-01-01
JS實現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼
這篇文章主要介紹了JS實現(xiàn)來回出現(xiàn)文字的狀態(tài)欄特效代碼,針對文字的定義及狀態(tài)欄的定時顯示等實現(xiàn)方法備有詳細的文字說明,需要的朋友可以參考下
2015-10-10
關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)硪黄P(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
簡述JavaScript提交表單的方式（Using JavaScript Submit Form）
這篇文章主要介紹了簡述JavaScript提交表單的方式（Using JavaScript Submit Form）的相關(guān)資料,需要的朋友可以參考下
2016-03-03
js實現(xiàn)div色塊碰撞
這篇文章主要為大家詳細介紹了js實現(xiàn)div色塊碰撞，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
echarts堆疊柱狀圖柱子之間間隔開具體實現(xiàn)代碼
ECharts是一個強大的數(shù)據(jù)可視化庫,它的堆疊柱狀圖通常用于比較各個分類的數(shù)據(jù)總量,這篇文章主要給大家介紹了echarts堆疊柱狀圖柱子之間間隔開具體實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-11-11
JavaScript面向?qū)ο笾接徐o態(tài)變量實例分析
這篇文章主要介紹了JavaScript面向?qū)ο笾接徐o態(tài)變量,結(jié)合實例形式分析了私有靜態(tài)變量的定義與使用方法,需要的朋友可以參考下
2016-01-01
利用JS如何獲取form表單數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于利用JS如何獲取form表單數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
js Canvas繪制圓形時鐘教程
這篇文章主要為大家詳細介紹了js Canvas繪制圓形時鐘教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
js實現(xiàn)炫酷的煙花效果
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09