JQuery之拖拽插件實(shí)現(xiàn)代碼
更新時(shí)間：2011年04月14日 21:58:39 作者：
一直以來(lái)，都對(duì)JS獲取元素的位置感到非常的困惑：一會(huì)client、一會(huì)offset、一會(huì)scroll。再加上各大瀏覽器之間的不兼容，唉，搞得哥暈暈乎乎的。
而很多頁(yè)面效果都要用到這些位置。不得已，得練練，得記記。
下面就來(lái)說(shuō)說(shuō)這個(gè)基于 JQuery的簡(jiǎn)易拖拽插件吧。
按慣例，先說(shuō)說(shuō)拖拽的原理，以及搞這么一個(gè)東東的步驟：
那什么是拖拽呢？ 看名字就知道了：就是把一個(gè)東東拖來(lái)拽去的。 放到我們的DOM上，就是改變它的位置。
它只有兩個(gè)難點(diǎn)：1、如何知道是在拖？ 2、如何知道從哪拖，拖到哪？
其實(shí)，這也算不上難點(diǎn)，畢竟兩者都是基礎(chǔ)的東西，關(guān)鍵在于熟練。
換到j(luò)s 中，我們搞一個(gè)拖拽效果，大致有如下步驟：
1、讓元素捕獲事件（一般情況下，無(wú)非就是mousedown、mousemove、mouseup)
2、在mousedown時(shí)，標(biāo)記開始拖拽，并獲取元素及鼠標(biāo)的位置。
3、在mousemove時(shí)，不斷的獲取鼠標(biāo)的新位置，并通過(guò)相應(yīng)的位置算法，來(lái)重新定位元素位置。
4、在mouseup時(shí)，結(jié)束拖拽。。。然后周而復(fù)始。
這中間，個(gè)需要注意的地方：被拖拽的元素，至少需要相對(duì)或絕對(duì)定位，否則拖拽不會(huì)有效果。
OK，不多說(shuō)，無(wú)代碼，無(wú)真相。相應(yīng)的解釋都在其中了：
下載：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeremy - DragDrop Test !</title>
<meta name="keywords" content="Javascript自由拖拽類" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function($)
{
$.extend({
//獲取鼠標(biāo)當(dāng)前坐標(biāo)
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
//獲取樣式值
getStyle:function(obj,styleName)
{
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
// return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
}
});
// 元素拖拽插件
$.fn.dragDrop = function(options)
{
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
//是否正在拖動(dòng)
var bDraging = false;
//移動(dòng)的元素
var moveEle = $(this);
//點(diǎn)擊哪個(gè)元素，以觸發(fā)移動(dòng)。
//該元素需要是被移動(dòng)元素的子元素（比如標(biāo)題等）
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
if(!focuEle || focuEle.length<=0)
{
alert('focuEle is not found! the element must be a child of '+this.id);
return false;
}
// initDiffX|Y : 初始時(shí)，鼠標(biāo)與被移動(dòng)元素原點(diǎn)的距離
// moveX|Y : 移動(dòng)時(shí)，被移動(dòng)元素定位位置 (新鼠標(biāo)位置與initDiffX|Y的差值)
// 如果定義了移動(dòng)中的回調(diào)函數(shù)，該對(duì)象將以參數(shù)傳入回調(diào)函數(shù)。
var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};
//被移動(dòng)元素，需要設(shè)置定位樣式，否則拖拽效果將無(wú)效。
moveEle.css({'position':'absolute','left':'0','top':'0'});
//點(diǎn)擊時(shí)，記錄鼠標(biāo)位置
//DOM寫法： getElementById('***').onmousedown= function(event);
focuEle.bind('mousedown',function(e){
//標(biāo)記開始移動(dòng)
bDraging = true;
//改變鼠標(biāo)形狀
moveEle.css({'cursor':'move'});
//捕獲事件。（該用法，還有個(gè)好處，就是防止移動(dòng)太快導(dǎo)致鼠標(biāo)跑出被移動(dòng)元素之外）
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
//（實(shí)際上是鼠標(biāo)當(dāng)前位置相對(duì)于被移動(dòng)元素原點(diǎn)的距離）
// DOM寫法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;
dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;
dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;
});
//移動(dòng)過(guò)程
focuEle.bind('mousemove',function(e){
if(bDraging)
{
//被移動(dòng)元素的新位置，實(shí)際上鼠標(biāo)當(dāng)前位置與原位置之差
//實(shí)際上，被移動(dòng)元素的新位置，也可以直接是鼠標(biāo)位置，這也能體現(xiàn)拖拽，但是元素的位置就不會(huì)精確。
dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
//是否限定在某個(gè)區(qū)域中移動(dòng).
//fixarea格式: [x軸最小值,x軸最大值,y軸最小值,y軸最大值]
if(opts.fixarea)
{
if(dragParams.moveX<opts.fixarea[0])
{
dragParams.moveX=opts.fixarea[0]
}
if(dragParams.moveX>opts.fixarea[1])
{
dragParams.moveX=opts.fixarea[1]
}
if(dragParams.moveY<opts.fixarea[2])
{
dragParams.moveY=opts.fixarea[2]
}
if(dragParams.moveY>opts.fixarea[3])
{
dragParams.moveY=opts.fixarea[3]
}
}
//移動(dòng)方向：可以是不限定、垂直、水平。
if(opts.dragDirection=='all')
{
//DOM寫法： document.getElementById('***').style.left = '***px';
moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
}
else if (opts.dragDirection=='vertical')
{
moveEle.css({'top':dragParams.moveY});
}
else if(opts.dragDirection=='horizontal')
{
moveEle.css({'left':dragParams.moveX});
}
//如果有回調(diào)
if(opts.callback)
{
//將dragParams作為參數(shù)傳遞
opts.callback.call(opts.callback,dragParams);
}
}
});
//鼠標(biāo)彈起時(shí)，標(biāo)記為取消移動(dòng)
focuEle.bind('mouseup',function(e){
bDraging=false;
moveEle.css({'cursor':'default'});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
});
});
};
//默認(rèn)配置
$.fn.dragDrop.defaults =
{
focuEle:null, //點(diǎn)擊哪個(gè)元素開始拖動(dòng),可為空。不為空時(shí)，需要為被拖動(dòng)元素的子元素。
callback:null, //拖動(dòng)時(shí)觸發(fā)的回調(diào)。
dragDirection:'all', //拖動(dòng)方向：['all','vertical','horizontal']
fixarea:null //限制在哪個(gè)區(qū)域拖動(dòng),以數(shù)組形式提供[minX,maxX,minY,maxY]
};
})(jQuery);
// test
$(function(){
//限定區(qū)域，有回調(diào)函數(shù)。
$('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
}});
//默認(rèn)設(shè)置
$('#dragDiv1').dragDrop();
});
</script>
</head>
<body>
<div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;">
<div id="dragDiv" style="background-color:blue;height:50px;width:50px;">
</div>
<div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;">
</div>
</div>
<span id="span1"></span>
</body>
</html>
下面就來(lái)說(shuō)說(shuō)這個(gè)基于 JQuery的簡(jiǎn)易拖拽插件吧。
按慣例，先說(shuō)說(shuō)拖拽的原理，以及搞這么一個(gè)東東的步驟：
那什么是拖拽呢？ 看名字就知道了：就是把一個(gè)東東拖來(lái)拽去的。 放到我們的DOM上，就是改變它的位置。
它只有兩個(gè)難點(diǎn)：1、如何知道是在拖？ 2、如何知道從哪拖，拖到哪？
其實(shí)，這也算不上難點(diǎn)，畢竟兩者都是基礎(chǔ)的東西，關(guān)鍵在于熟練。
換到j(luò)s 中，我們搞一個(gè)拖拽效果，大致有如下步驟：
1、讓元素捕獲事件（一般情況下，無(wú)非就是mousedown、mousemove、mouseup)
2、在mousedown時(shí)，標(biāo)記開始拖拽，并獲取元素及鼠標(biāo)的位置。
3、在mousemove時(shí)，不斷的獲取鼠標(biāo)的新位置，并通過(guò)相應(yīng)的位置算法，來(lái)重新定位元素位置。
4、在mouseup時(shí)，結(jié)束拖拽。。。然后周而復(fù)始。
這中間，個(gè)需要注意的地方：被拖拽的元素，至少需要相對(duì)或絕對(duì)定位，否則拖拽不會(huì)有效果。
OK，不多說(shuō)，無(wú)代碼，無(wú)真相。相應(yīng)的解釋都在其中了：
下載：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeremy - DragDrop Test !</title>
<meta name="keywords" content="Javascript自由拖拽類" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function($)
{
$.extend({
//獲取鼠標(biāo)當(dāng)前坐標(biāo)
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
//獲取樣式值
getStyle:function(obj,styleName)
{
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
// return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
}
});
// 元素拖拽插件
$.fn.dragDrop = function(options)
{
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
//是否正在拖動(dòng)
var bDraging = false;
//移動(dòng)的元素
var moveEle = $(this);
//點(diǎn)擊哪個(gè)元素，以觸發(fā)移動(dòng)。
//該元素需要是被移動(dòng)元素的子元素（比如標(biāo)題等）
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
if(!focuEle || focuEle.length<=0)
{
alert('focuEle is not found! the element must be a child of '+this.id);
return false;
}
// initDiffX|Y : 初始時(shí)，鼠標(biāo)與被移動(dòng)元素原點(diǎn)的距離
// moveX|Y : 移動(dòng)時(shí)，被移動(dòng)元素定位位置 (新鼠標(biāo)位置與initDiffX|Y的差值)
// 如果定義了移動(dòng)中的回調(diào)函數(shù)，該對(duì)象將以參數(shù)傳入回調(diào)函數(shù)。
var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};
//被移動(dòng)元素，需要設(shè)置定位樣式，否則拖拽效果將無(wú)效。
moveEle.css({'position':'absolute','left':'0','top':'0'});
//點(diǎn)擊時(shí)，記錄鼠標(biāo)位置
//DOM寫法： getElementById('***').onmousedown= function(event);
focuEle.bind('mousedown',function(e){
//標(biāo)記開始移動(dòng)
bDraging = true;
//改變鼠標(biāo)形狀
moveEle.css({'cursor':'move'});
//捕獲事件。（該用法，還有個(gè)好處，就是防止移動(dòng)太快導(dǎo)致鼠標(biāo)跑出被移動(dòng)元素之外）
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
//（實(shí)際上是鼠標(biāo)當(dāng)前位置相對(duì)于被移動(dòng)元素原點(diǎn)的距離）
// DOM寫法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;
dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;
dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;
});
//移動(dòng)過(guò)程
focuEle.bind('mousemove',function(e){
if(bDraging)
{
//被移動(dòng)元素的新位置，實(shí)際上鼠標(biāo)當(dāng)前位置與原位置之差
//實(shí)際上，被移動(dòng)元素的新位置，也可以直接是鼠標(biāo)位置，這也能體現(xiàn)拖拽，但是元素的位置就不會(huì)精確。
dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
//是否限定在某個(gè)區(qū)域中移動(dòng).
//fixarea格式: [x軸最小值,x軸最大值,y軸最小值,y軸最大值]
if(opts.fixarea)
{
if(dragParams.moveX<opts.fixarea[0])
{
dragParams.moveX=opts.fixarea[0]
}
if(dragParams.moveX>opts.fixarea[1])
{
dragParams.moveX=opts.fixarea[1]
}
if(dragParams.moveY<opts.fixarea[2])
{
dragParams.moveY=opts.fixarea[2]
}
if(dragParams.moveY>opts.fixarea[3])
{
dragParams.moveY=opts.fixarea[3]
}
}
//移動(dòng)方向：可以是不限定、垂直、水平。
if(opts.dragDirection=='all')
{
//DOM寫法： document.getElementById('***').style.left = '***px';
moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
}
else if (opts.dragDirection=='vertical')
{
moveEle.css({'top':dragParams.moveY});
}
else if(opts.dragDirection=='horizontal')
{
moveEle.css({'left':dragParams.moveX});
}
//如果有回調(diào)
if(opts.callback)
{
//將dragParams作為參數(shù)傳遞
opts.callback.call(opts.callback,dragParams);
}
}
});
//鼠標(biāo)彈起時(shí)，標(biāo)記為取消移動(dòng)
focuEle.bind('mouseup',function(e){
bDraging=false;
moveEle.css({'cursor':'default'});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
});
});
};
//默認(rèn)配置
$.fn.dragDrop.defaults =
{
focuEle:null, //點(diǎn)擊哪個(gè)元素開始拖動(dòng),可為空。不為空時(shí)，需要為被拖動(dòng)元素的子元素。
callback:null, //拖動(dòng)時(shí)觸發(fā)的回調(diào)。
dragDirection:'all', //拖動(dòng)方向：['all','vertical','horizontal']
fixarea:null //限制在哪個(gè)區(qū)域拖動(dòng),以數(shù)組形式提供[minX,maxX,minY,maxY]
};
})(jQuery);
// test
$(function(){
//限定區(qū)域，有回調(diào)函數(shù)。
$('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
}});
//默認(rèn)設(shè)置
$('#dragDiv1').dragDrop();
});
</script>
</head>
<body>
<div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;">
<div id="dragDiv" style="background-color:blue;height:50px;width:50px;">
</div>
<div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;">
</div>
</div>
<span id="span1"></span>
</body>
</html>
您可能感興趣的文章:
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
- jQuery拖拽div實(shí)現(xiàn)思路
- jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
- 如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
- 簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼
- jQuery插件實(shí)現(xiàn)文件上傳功能（支持拖拽）
- jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
- jQuery EasyUI API 中文文檔 - Draggable 可拖拽
- jquery實(shí)現(xiàn)拖拽小方塊效果
相關(guān)文章
在jquery是遍歷篩選數(shù)組有多種方法與函數(shù)了，包括有:grep、each、inArray、map同時(shí)也要以遍歷json對(duì)象哦，下面給各位同學(xué)介紹一下具體的操作方法2013-11-11
javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
這篇文章主要介紹了jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換的代碼，十分的簡(jiǎn)潔，有需要的小伙伴可以參考下2015-06-06
在UpdatePanel內(nèi)jquery easyui效果失效的解決方法
項(xiàng)目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁(yè)面不刷新，用戶感覺比較好，同時(shí)也減少了一部分?jǐn)?shù)據(jù)量的傳輸。2010-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊?yè)面元素樣式控制的相關(guān)技巧,需要的朋友可以參考下2015-07-07
把一個(gè)元素淡出或淡入可以達(dá)到更為生動(dòng)的效果，在任何一種情況下，都只是隨著時(shí)間來(lái)改變?cè)氐耐该鞫?/div> 2014-09-09
jquery動(dòng)態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼，但不能加載css，后來(lái)自己寫了一個(gè)可加載js與css的程序2014-10-10
jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果的方法,涉及jquery中toggle結(jié)合animate方法操作頁(yè)面元素屬性的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
基于jQuery和CSS3制作響應(yīng)式水平時(shí)間軸附源碼下載
我們經(jīng)?？吹接泻芏嗟拇怪睍r(shí)間軸用來(lái)記錄事件進(jìn)展，而有朋友問(wèn)我要求分享水平的時(shí)間軸，其實(shí)水平時(shí)間軸的難點(diǎn)在于自適應(yīng)屏幕尺寸。那么 今天我要給大家分享的是一款支持響應(yīng)式、支持觸屏手勢(shì)滑動(dòng)的水平時(shí)間軸2015-12-12
JQuery與iframe交互實(shí)現(xiàn)代碼
JQuery與iframe交互實(shí)現(xiàn)代碼2009-12-12最新評(píng)論