javascript完美拖拽的實現(xiàn)方法
更新時間：2013年09月29日 16:42:10 作者：
這篇文章介紹了javascript完美拖拽的實現(xiàn)方法，有需要的朋友可以參考一下
HTML代碼：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="login">
<h2>網(wǎng)站登錄</h2>
<div class="user">
用戶名：<input type="text" name="user" class="txt" />
</div>
<div class="pass">
密 碼：<input type="password" name="pass" class="txt" />
</div>
<div class="submit">
<input type="submit" value="登錄" class="button" />
</div>
</div>
</body>
</html>
CSS代碼：
body, h2 {
margin:0;
padding:0;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
left:512px;
top:300px;
}
#login h2 {
font-size:14px;
text-align:center;
height:30px;
line-height:30px;
background:#f60;
color:white;
cursor:move;
margin-bottom:30px;
letter-spacing:1px;
}
#login .user, #login .pass {
text-align:center;
font-size:12px;
height:60px;
line-height:40px;
}
#login .txt {
width:200px;
border:1px solid #ccc;
background:#fff;
height:30px;
line-height:30px;
}
#login .submit {
text-align:right;
}
#login .button {
width:100px;
height:30px;
background:#06f;
border:none;
cursor:pointer;
margin:10px 30px;
color:white;
letter-spacing:1px;
font-weight:bold;
}
拖拽核心代碼：
function drag(obj) {
if (typeof obj === 'string') {
var obj = document.getElementById(obj);
} else {
var obj = obj;
}
function fixEvent(event) {
event.target = event.srcElement;
event.preventDefault = fixEvent.preventDefault;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
};
obj.onmousedown = mousedown;
function mousedown(e) {
var e = e || fixEvent(window.event);
var disX = e.clientX - obj.offsetLeft;
var disY = e.clientY - obj.offsetTop;
if (e.target.tagName === 'H2') {
document.onmousemove = move;
document.onmouseup = up;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
function move(e) {
var e = e || fixEvent(window.event);
var left = e.clientX - disX;
var top = e.clientY - disY;
if (obj.setCapture) {
obj.setCapture();
}
if (left < 0) {
left = 0;
} else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
left = document.documentElement.clientWidth - obj.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
top = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
return false;
};
function up() {
if (obj.releaseCapture) {
obj.releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
}
};
}
調(diào)用代碼：
window.onload = function () {
var login = document.getElementById('login');
drag(login);
};
歡迎批評指正！?。?
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="login">
<h2>網(wǎng)站登錄</h2>
<div class="user">
用戶名：<input type="text" name="user" class="txt" />
</div>
<div class="pass">
密 碼：<input type="password" name="pass" class="txt" />
</div>
<div class="submit">
<input type="submit" value="登錄" class="button" />
</div>
</div>
</body>
</html>
CSS代碼：
復(fù)制代碼 代碼如下:
body, h2 {
margin:0;
padding:0;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
left:512px;
top:300px;
}
#login h2 {
font-size:14px;
text-align:center;
height:30px;
line-height:30px;
background:#f60;
color:white;
cursor:move;
margin-bottom:30px;
letter-spacing:1px;
}
#login .user, #login .pass {
text-align:center;
font-size:12px;
height:60px;
line-height:40px;
}
#login .txt {
width:200px;
border:1px solid #ccc;
background:#fff;
height:30px;
line-height:30px;
}
#login .submit {
text-align:right;
}
#login .button {
width:100px;
height:30px;
background:#06f;
border:none;
cursor:pointer;
margin:10px 30px;
color:white;
letter-spacing:1px;
font-weight:bold;
}
拖拽核心代碼：
復(fù)制代碼 代碼如下:
function drag(obj) {
if (typeof obj === 'string') {
var obj = document.getElementById(obj);
} else {
var obj = obj;
}
function fixEvent(event) {
event.target = event.srcElement;
event.preventDefault = fixEvent.preventDefault;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
};
obj.onmousedown = mousedown;
function mousedown(e) {
var e = e || fixEvent(window.event);
var disX = e.clientX - obj.offsetLeft;
var disY = e.clientY - obj.offsetTop;
if (e.target.tagName === 'H2') {
document.onmousemove = move;
document.onmouseup = up;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
function move(e) {
var e = e || fixEvent(window.event);
var left = e.clientX - disX;
var top = e.clientY - disY;
if (obj.setCapture) {
obj.setCapture();
}
if (left < 0) {
left = 0;
} else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
left = document.documentElement.clientWidth - obj.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
top = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
return false;
};
function up() {
if (obj.releaseCapture) {
obj.releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
}
};
}
調(diào)用代碼：
復(fù)制代碼 代碼如下:
window.onload = function () {
var login = document.getElementById('login');
drag(login);
};
歡迎批評指正！?。?
您可能感興趣的文章:
- javascript 圖片放大效果函數(shù)
- 一個簡單的javascript圖片放大效果代碼
- javascript 圖片放大縮小功能實現(xiàn)代碼
- JavaScript圖片放大技術(shù)(放大鏡)實現(xiàn)代碼分享
- 原生javascript實現(xiàn)DIV拖拽并計算重復(fù)面積
- Javascript 拖拽的一些簡單的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
- JavaScript實現(xiàn)文字與圖片拖拽效果的方法
- javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
- javascript實現(xiàn)完美拖拽效果
- JavaScript實現(xiàn)的簡單拖拽效果
- JavaScript實現(xiàn)可拖拽的拖動層Div實例
- js實現(xiàn)圖片放大和拖拽特效代碼分享
相關(guān)文章
下面小編就為大家?guī)硪黄猨s獲取元素的標(biāo)簽名實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
每天一篇javascript學(xué)習(xí)小結(jié)（Boolean對象）
這篇文章主要介紹了javascript中的Boolean對象知識點，對Boolean對象的基本使用方法進行解釋，一段很詳細的代碼介紹，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript函數(shù)柯里化是一種將接受多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受單個參數(shù)的函數(shù)的技術(shù)。本文將通過簡單的示例為大家詳細講講函數(shù)柯里化的相關(guān)應(yīng)用，需要的可以參考一下2023-04-04
這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
點擊顯示指定元素并隱藏其他同輩元素，下面有個不錯的方法,需要的朋友可以參考下2014-02-02
JavaScript用二分法查找數(shù)據(jù)的實例代碼
本篇文章主要介紹了JavaScript用二分法查找數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
微信小程序bindtap與catchtap的區(qū)別詳解
本文主要介紹了微信小程序bindtap與catchtap的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
javascript對象的相關(guān)操作小結(jié)
下面小編就為大家?guī)硪黄猨avascript對象的相關(guān)操作小結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
js實現(xiàn)橫向百葉窗效果網(wǎng)頁切換動畫效果的方法
這篇文章主要介紹了js實現(xiàn)橫向百葉窗效果網(wǎng)頁切換動畫效果的方法,實例分析了javascript實現(xiàn)百葉窗效果的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航的相關(guān)內(nèi)容，文中通過示例代碼介紹的非常詳細，兼容各種手機,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12