JQuery之拖拽外掛實現程式碼

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

而很多頁面效果都要用到這些位置。不得已,得練練,得記記。
下面就來說說這個基於 JQuery的簡易拖拽外掛吧。
按慣例,先說說拖拽的原理,以及搞這麼一個東東的步驟:
那什麼是拖拽呢? 看名字就知道了:就是把一個東東拖來拽去的。 放到我們的DOM上,就是改變它的位置。
它只有兩個難點:1、如何知道是在拖? 2、如何知道從哪拖,拖到哪?
其實,這也算不上難點,畢竟兩者都是基礎的東西,關鍵在於熟練。
換到js 中,我們搞一個拖拽效果,大致有如下步驟:
1、讓元素捕獲事件(一般情況下,無非就是mousedown、mousemove、mouseup)
2、在mousedown時,標記開始拖拽,並獲取元素及滑鼠的位置。
3、在mousemove時,不斷的獲取滑鼠的新位置,並通過相應的位置演算法,來重新定位元素位置。
4、在mouseup時,結束拖拽。。。然後周而復始。
這中間,個需要注意的地方:被拖拽的元素,至少需要相對或絕對定位,否則拖拽不會有效果。
OK,不多說,無程式碼,無真相。相應的解釋都在其中了:
下載:
複製程式碼 程式碼如下:
<!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({
//獲取滑鼠當前座標
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(){
//是否正在拖動
var bDraging = false;
//移動的元素
var moveEle = $(this);
//點選哪個元素,以觸發移動。
//該元素需要是被移動元素的子元素(比如標題等)
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 : 初始時,滑鼠與被移動元素原點的距離
// moveX|Y : 移動時,被移動元素定位位置 (新滑鼠位置與initDiffX|Y的差值)
// 如果定義了移動中的回撥函式,該物件將以引數傳入回撥函式。
var dragParams = {initDiffX:”,initDiffY:”,moveX:”,moveY:”};
//被移動元素,需要設定定位樣式,否則拖拽效果將無效。
moveEle.css({‘position’:’absolute’,’left’:’0′,’top’:’0′});
//點選時,記錄滑鼠位置
//DOM寫法: getElementById(‘***’).onmousedown= function(event);
focuEle.bind(‘mousedown’,function(e){
//標記開始移動
bDraging = true;
//改變滑鼠形狀
moveEle.css({‘cursor’:’move’});
//捕獲事件。(該用法,還有個好處,就是防止移動太快導致滑鼠跑出被移動元素之外)
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
//(實際上是滑鼠當前位置相對於被移動元素原點的距離)
// 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;
});
//移動過程
focuEle.bind(‘mousemove’,function(e){
if(bDraging)
{
//被移動元素的新位置,實際上滑鼠當前位置與原位置之差
//實際上,被移動元素的新位置,也可以直接是滑鼠位置,這也能體現拖拽,但是元素的位置就不會精確。
dragParams.moveX = $.mouseCoords(e).x – dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y – dragParams.initDiffY;
//是否限定在某個區域中移動.
//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]
}
}
//移動方向:可以是不限定、垂直、水平。
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});
}
//如果有回撥
if(opts.callback)
{
//將dragParams作為引數傳遞
opts.callback.call(opts.callback,dragParams);
}
}
});
//滑鼠彈起時,標記為取消移動
focuEle.bind(‘mouseup’,function(e){
bDraging=false;
moveEle.css({‘cursor’:’default’});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
});
});
};
//預設配置
$.fn.dragDrop.defaults =
{
focuEle:null, //點選哪個元素開始拖動,可為空。不為空時,需要為被拖動元素的子元素。
callback:null, //拖動時觸發的回撥。
dragDirection:’all’, //拖動方向:[‘all’,’vertical’,’horizontal’]
fixarea:null //限制在哪個區域拖動,以陣列形式提供[minX,maxX,minY,maxY]
};
})(jQuery);
// test
$(function(){
//限定區域,有回撥函式。
$(‘#dragDiv’).dragDrop({fixarea:[0,$(‘#dragContainer’).width()-50,0,$(‘#dragContainer’).height()-50],callback:function(params){
$(‘#span1’).text(‘X:’ params.moveX ‘ Y:’ params.moveY);
}});
//預設設定
$(‘#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-ui中的sortable來實現拖拽排序的簡單例項jquery sortable的拖動方法示例詳解jquery中的sortable排序之後的儲存狀態的解決方法模仿JQuery sortable效果 程式碼有錯但值得看看JQuery Dialog(JS 模態視窗,可拖拽的DIV)JQuery UI的拖拽功能實現方法小結jQuery拖拽div實現思路簡單的jquery拖拽排序效果實現程式碼如何使用jQuery Draggable和Droppable實現拖拽功能jquery ui sortable拖拽後儲存位置

相關文章

前端開發 最新文章