jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
更新時(shí)間：2014年04月08日 11:26:41 作者：
正如標(biāo)題所言的實(shí)現(xiàn)原理是使div的position為絕對(duì)定位absolute，然后控制其top與left值,需要的朋友可以參考下
代碼演示：
http://www.imqing.com/demo/movediv.html
大概原理：
使div的position為絕對(duì)定位absolute，然后控制其top與left值，需要監(jiān)聽(tīng)鼠標(biāo)事件，主要用到mousedown, mousemove, mouseup。
在mousedown后，記錄mousedown時(shí)鼠標(biāo)與需要移動(dòng)的div的位置，然后取得兩者之差，得到在鼠標(biāo)移動(dòng)后，div的位置。即：
left = 當(dāng)前鼠標(biāo)位置.x - (鼠標(biāo)點(diǎn)擊時(shí)的.x值 - div的初始位置x值)
top = 當(dāng)前鼠標(biāo)位置.y - (鼠標(biāo)點(diǎn)擊時(shí)的.y值 - div的初始位置y值)
代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div class="moveBar">
<div id="banner">按住此處移動(dòng)當(dāng)前div</div>
<div class="content">這里是其它內(nèi)容</div>
</div>
<div class="footer">
<p align="center" class="label">ALL Rights Reserved Qing 版權(quán)所有</p>
</div>
<script>
jQuery(document).ready(
function () {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>
其實(shí)代碼量也不多的，嘿嘿。要點(diǎn)就是需要移動(dòng)的div的position是絕對(duì)定位，然后檢測(cè)鼠標(biāo)事件就行了。嘿嘿。
http://www.imqing.com/demo/movediv.html
大概原理：
使div的position為絕對(duì)定位absolute，然后控制其top與left值，需要監(jiān)聽(tīng)鼠標(biāo)事件，主要用到mousedown, mousemove, mouseup。
在mousedown后，記錄mousedown時(shí)鼠標(biāo)與需要移動(dòng)的div的位置，然后取得兩者之差，得到在鼠標(biāo)移動(dòng)后，div的位置。即：
left = 當(dāng)前鼠標(biāo)位置.x - (鼠標(biāo)點(diǎn)擊時(shí)的.x值 - div的初始位置x值)
top = 當(dāng)前鼠標(biāo)位置.y - (鼠標(biāo)點(diǎn)擊時(shí)的.y值 - div的初始位置y值)
代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div class="moveBar">
<div id="banner">按住此處移動(dòng)當(dāng)前div</div>
<div class="content">這里是其它內(nèi)容</div>
</div>
<div class="footer">
<p align="center" class="label">ALL Rights Reserved Qing 版權(quán)所有</p>
</div>
<script>
jQuery(document).ready(
function () {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>
其實(shí)代碼量也不多的，嘿嘿。要點(diǎn)就是需要移動(dòng)的div的position是絕對(duì)定位，然后檢測(cè)鼠標(biāo)事件就行了。嘿嘿。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能示例【拖動(dòng)div等任何標(biāo)簽】
- jquery div拖動(dòng)效果示例代碼
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jquery拖動(dòng)改變div大小
- 使用jQuery的easydrag插件實(shí)現(xiàn)可拖動(dòng)的DIV彈出框
- jquery實(shí)現(xiàn)可拖動(dòng)DIV自定義保存到數(shù)據(jù)的實(shí)例
- jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐
相關(guān)文章
Android中的jQuery:AQuery簡(jiǎn)介
jQuery的流行已經(jīng)成為了事實(shí)，它極大地減少了執(zhí)行異步任務(wù)和操作DOM所需要的代碼數(shù)量。新項(xiàng)目AQuery想要為Android開(kāi)發(fā)者提供同樣的功能2014-05-05
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了限制上傳文件大小和格式的jQuery插件,實(shí)例分析了對(duì)上傳文件的大小及格式的限制功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery中slideUp()方法用法,以實(shí)例形式分析了slideUp()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery布局插件UI Layout簡(jiǎn)介及使用方法
UI Layout是一種基于jQuery的布局框架，其核心是一個(gè)大小自適應(yīng)的中心面板，面板的上下左右四個(gè)方向可以放置可折疊、可縮放的面板，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了jQuery中detach()方法用法,以不同實(shí)例形式分析了detach()方法刪除匹配元素的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。2010-05-05
利用JQuery動(dòng)畫制作滑動(dòng)菜單項(xiàng)效果實(shí)現(xiàn)步驟及代碼
滑動(dòng)菜單項(xiàng)效果,聽(tīng)起來(lái)就是很時(shí)尚的一個(gè)效果，不過(guò)實(shí)現(xiàn)起來(lái)有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個(gè)困惑，熱愛(ài)特效的你可不要錯(cuò)過(guò)了哈，好了話不多說(shuō)切入正文2013-02-02
再分享70+免費(fèi)的jquery 圖片滑塊效果插件和教程
這些jQuery插件同樣可以實(shí)現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測(cè)試了一些，都可以正常訪問(wèn)，我相信那么多款插件中總會(huì)有你喜歡的2014-12-12
jquery刪除table當(dāng)前行的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇jquery刪除table當(dāng)前行的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10