首頁 > 開發者 > JavaScript
而很多頁面效果都要用到這些位置。不得已，得練練，得記記。
下面就來說說這個基於 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
