本文使用Jquery UI實現了可拖動的div，效果預覽網址：http:///keleyi/phtml/jui/draggable/1.htm
以下是完整代碼，保存到html文件，打開也可以預覽效果：
<!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>可拖動div--</title>
<link rel="stylesheet" href="http:///keleyi/pmedia/jquery/ui/1.10.3/css/ui-lightness/jquery-ui-1.10.3.min.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="http:///keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<style type="text/css"> #draggable { width: 150px; height: 150px; padding: 0.5em; }</style>
<script type="text/javascript">
$(function () { $("#draggable").draggable(); });
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content"> <p>我是<a href="http://" target="_blank"></a><br />拖動我試試</p></div>
<div><a href="http:///a/bjac/9dd21532ed1dbf23.htm" target="_blank">原文</a></div>
</body>
</html>
還可以設置光標：
$(function () { $("#draggable").draggable({ cursor: "move", cursorAt: { top: 75, left: 75} }); });
http:///keleyi/phtml/jui/draggable/index.htm
$(selector).draggable("disable"); // 禁止其拖動功能
$(selector).draggable("enable"); // 激活其拖動功能
$(selector).draggable("destory"); // 完全刪除拖動功能
JQuery UI Draggable插件用來使選中的元素可以通過鼠標拖動.
Draggable的元素受影響css: ui-draggable, 拖動過程中的css: ui-draggable-dragging.
如果需要的不僅僅是拖, 而是一個完整的拖放功能, 請參閱JQuery UI 的Droppable插件, 該插件提供了一個draggable放的目標.
所有的回調函數(start, stop, drag等事件)接受兩個參數:
event: 浏覽器原生的事件
ui: 一個JQuery的ui對象, 其中有以下主要屬性
ui.helper: 正在拖動的元素的JQuery包裝對象, ui.helper.context可以獲取到原生的DOM元素.
ui.position: ui.helper(也就是我們要拖動的元素)相對於父元素(包含自己的元素, 如果是頂層, 對應body)的偏移, 值是一個對象{top, left}----也就是可以用ui.position.top獲取到該元素與父元素的top當前偏移
ui.offset: 與ui.position同意, 這裡表示的是和浏覽器內容區域左上邊界的偏移(注意, 是內容區域, 而不是html的body區域. html的body在默認情況下, 各種浏覽器中都會相對offset有偏移的.)
[選項]
addClasses:
[類型]Boolean(布爾值)
[默認值]true
[產生影響]
用來設置是否給draggable元素通過ui-draggable樣式才裝飾它. 主要為了在通過.draggable()初始化很多(成百個)元素的時候優化性能考慮, 但是, 這個選項的設置, 不會影響ui-draggable-dragging樣式改變拖動過程樣式.
true表示ui-draggable樣式被添加到該元素.
false表示ui-draggable樣式不被添加到該元素.
[代碼示例]draggable其他選項的初始化, 獲取屬性值, 設置屬性值部分除有特殊功能, 不再贅述, 僅粘貼代碼.
[初始化]
$('.selector').draggable({ addClasses: false });
將.selector選擇器選中的元素渲染成為一個可拖動控件, 不為其添加ui-draggable樣式
[獲取屬性值]
var addClasses = $('#draggable').draggable('option', 'addClasses');
獲取.selector選擇器選中的可拖動控件的addClasses選項的值.
[設置屬性值]
$('.selector').draggable('option', 'addClasses', false);
將.selector選擇器選中的可拖動控件的addClasses選項值設置為false.
appendTo:
[類型]Element, Selector(HTML元素對象或選擇器)
[默認值]'parent' 父元素
[產生影響]
用來指定控件在拖動過程中ui.helper的容器, 默認情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.
[代碼示例]
[初始化]
$('.selector').draggable({ appendTo: 'body' });
[獲取屬性值]
//getter
var appendTo = $('.selector').draggable('option', 'appendTo');
[設置屬性值]
//setter
$('.selector').draggable('option', 'appendTo', 'body');.
axis:
[類型]String, Boolean(可取的值有'x', 'y', false)
'x': 只能水平拖動
'y': 只能垂直拖動
false: 既可以水平, 也可以垂直拖動.
[默認值]false, 不限制拖動的方向
[產生影響]
約束拖動過程中的取向.
[代碼示例]
[初始化]
$('.selector').draggable({ axis: 'x' });
[獲取屬性值]
var axis = $('.selector').draggable('option', 'axis');
[設置屬性值]
$('.selector').draggable('option', 'axis', 'x');
cancel:
[類型]選擇器
[默認值]':input, option'
[產生影響]
通過選擇器指定這類元素不能被渲染成draggable控件.
[代碼示例]
[初始化]
$('.selector').draggable({ cancel: 'button' });
[獲取屬性值]
var cancel = $('.selector').draggable('option', 'cancel');
[設置屬性值]
$('.selector').draggable('option', 'cancel', 'button');
connectToSortable: 此選項需要和sortable聯合工作, 再議.
[類型]選擇器
[默認值]':input, option'
[產生影響]
通過選擇器指定這類元素不能被渲染成draggable控件.
[代碼示例]
[初始化]
$('.selector').draggable({ cancel: 'button' });
[獲取屬性值]
var cancel = $('.selector').draggable('option', 'cancel');
[設置屬性值]
$('.selector').draggable('option', 'cancel', 'button');
containment:
[類型]選擇器, 元素, 字符串, 數組.
選擇器: 只能在選擇器約束的元素內拖動
元素: 只能在給定的元素內拖動
字符串:
parent: 只能在父容器內拖動
document: 在當前html文檔的document下可拖動, 超出浏覽器窗口范圍時, 自動出現滾動條
widow: 只能在當前浏覽器窗口的內容區域拖動, 拖動超出當前窗口范圍, 不會導致出現滾動條...
數組: [x1, y1, x2, y2]以[開始水平坐標, 開始垂直坐標, 結束水平坐標, 結束垂直坐標]的方式劃定一個區域, 只能在此區域內拖動. 這種方式指定時, 值是相對當前浏覽器窗口內容區域左上角的偏移值.
false: 不限制拖動的活動范圍
[默認值]false
[產生影響]
影響指定可拖動控件的活動區域.
[代碼示例]
[初始化]
$('.selector').draggable({ containment: 'parent' });
[獲取屬性值]
var containment = $('.selector').draggable('option', 'containment');
[設置屬性值]
$('.selector').draggable('option', 'containment', 'parent');
cursor:
[類型]字符串.
[默認值]'auto'
[產生影響]
影響指定可拖動控件在拖動過程中的鼠標樣式, 該樣式設定之後, 需要控件的原始元素支持指定的cursor樣式, 如果指定的值原始元素不支持, 則使用原始元素默認的cursor樣式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由於button不支持crosshair這個鼠標樣式, 所以, 會以默認形式顯示.
[代碼示例]
[初始化]
$('.selector').draggable({ cursor: 'crosshair' });
[獲取屬性值]
var cursor = $('.selector').draggable('option', 'cursor');
[設置屬性值]
$('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[類型]對象
通過設置對象的top, left, right, bottom的屬性值中的一個或兩個來確定位置.
[默認值]false
[產生影響]
在拖動控件的過程中, 鼠標在控件上顯示的位置, 值為false(默認)時, 從哪裡點擊開始拖動, 鼠標位置就在哪裡, 如果設置了, 就會在一個相對控件自身左上角偏移位置處, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那麼拖動過程中, 鼠標就會在自身的左上角向下向右各偏移8像素處.
[代碼示例]
[初始化]
$('.selector').draggable({ cursor: 'crosshair' });
[獲取屬性值]
var cursor = $('.selector').draggable('option', 'cursor');
[設置屬性值]
$('.selector').draggable('option', 'cursor', 'crosshair');
delay:
[類型]整數, 單位是毫秒
[默認值]0
[產生影響]
可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的延時. 該選項可以被用來阻止一些不期望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵按下, 到delay指定的時間, 如果鼠標左鍵還沒有松開, 那麼就認為這次拖動有效, 否則, 認為這次拖動無效.
[代碼示例]
[初始化]
$('.selector').draggable({ delay: 500 });
[獲取屬性值]
var delay = $('.selector').draggable('option', 'delay');
[設置屬性值]
$('.selector').draggable('option', 'delay', 500);
distance:
[類型]整數, 單位是像素
[默認值]1
[產生影響]
可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的時鼠標必須產生的位移. 該選項可以被用來阻止一些不期望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵按下, 只有當鼠標產生的位移達到distance指定的值時, 才認為是有效的拖動.
[代碼示例]
[初始化]
$('.selector').draggable({ distance: 30 });
[獲取屬性值]
var distance = $('.selector').draggable('option', 'distance');
[設置屬性值]
$('.selector').draggable('option', 'distance', 30);
grid:
[類型]數組[x, y], x代表水平大小, y代表垂直大小, 單位是像素
[默認值]false
[產生影響]
可拖動控件拖動時采用grid的方式拖動, 也就是說拖動過程中的單位是guid選項指定的數組描述的格子那麼大.
[代碼示例]
[初始化]
$('.selector').draggable({ grid: [50, 20] });
[獲取屬性值]
var grid = $('.selector').draggable('option', 'grid');
[設置屬性值]
$('.selector').draggable('option', 'grid', [50, 20]);
handle:
[類型]選擇器或元素
[默認值]false
[產生影響]
指定觸發拖動的元素. 用法: 將一個id=window的div設置為可拖動控件, 設置它的handle是該div中的一個id=title的span, 那麼, 就只有在id=title的span上點擊拖動才是有效的. 注意: 該元素一定要是可拖動控件的子元素.
[代碼示例]
[初始化]
$('.selector').draggable({ handle: 'h2' });
[獲取屬性值]
var handle = $('.selector').draggable('option', 'handle');
[設置屬性值]
$('.selector').draggable('option', 'handle', 'h2');
helper:
[類型]字符串或函數
字符串取值:
'original': 可拖動控件本身移動
'clone': 將可拖動控件自身克隆一個移動, 自身在原始位置不變
函數則必須返回一個DOM元素: 以函數返回的DOM元素移動展現拖動的過程.
[默認值]'original'
[產生影響]
拖動過程中幫助用戶知道當前拖動位置的元素.
[代碼示例]
[初始化]
$('.selector').draggable({ helper: 'clone' });
[獲取屬性值]
var helper = $('.selector').draggable('option', 'helper');
[設置屬性值]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[類型]布爾值或選擇器, 選擇器的選擇結果需要是iframe元素
[默認值]false
[產生影響]
阻止拖動過程中由於鼠標指針在iframe區域移動, iframe對鼠標移動事件的默認響應.
如果設置為true, 將會阻止拖動過程中當前頁面上所有的iframe的mousemove事件, 如果設置一個選擇器, 將會阻止指定的iframe的mousemove事件.
[代碼示例]
[初始化]
$('.selector').draggable({ iframeFix: true });
[獲取屬性值]
var iframeFix = $('.selector').draggable('option', 'iframeFix');
[設置屬性值]
$('.selector').draggable('option', 'iframeFix', true);
opacity:
[類型]浮點數值
[默認值]false
[產生影響]
拖動過程中helper(拖動時跟隨鼠標移動的控件)的不透明度.
[代碼示例]
[初始化]
$('.selector').draggable({ opacity: 0.35 });
[獲取屬性值]
var opacity = $('.selector').draggable('option', 'opacity');
[設置屬性值]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[類型]Boolean
[默認值]false
[產生影響]
如果設置為true, 所有的droppable位置會在每次mousemove事件中進行計算.
注意: 該選項主要用於解決高級動態頁面展現問題. 慎用.
[代碼示例]
[初始化]
$('.selector').draggable({ refreshPositions: true });
[獲取屬性值]
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
[設置屬性值]
$('.selector').draggable('option', 'refreshPositions', true);
revert:
[類型]Boolean, 字符串
[默認值]false
[產生影響]
影響一次拖動之後是否回歸到原始位置.
true: 每次拖動停止之後, 元素自動回到原始位置
'invalid': 除非是一個droppable並且被drop(放)成功了, 才不將元素返回到原始位置.
'valid': 除invalid之外的其他情況.
[代碼示例]
[初始化]
$('.selector').draggable({ revert: true });
[獲取屬性值]
var revert = $('.selector').draggable('option', 'revert');
[設置屬性值]
$('.selector').draggable('option', 'revert', true);
revertDuration:
[類型]整數
[默認值]500
[產生影響]
revert(回歸到原始位置)整個過程需要的時間, 單位是毫秒. 如果設置revert選項設置為false, 則忽略此屬性.
[代碼示例]
[初始化]
$('.selector').draggable({ revertDuration: 1000 });
[獲取屬性值]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[設置屬性值]
$('.selector').draggable('option', 'revertDuration', 1000);
scope:
[類型]字符串
[默認值]'default'
[產生影響]
該選項描述一個范圍, 和droppable的同名選項結合使用, droppable的accept選項用來設置可以接受的draggable控件, 同時, 可接受的drggable控件受scope選項約束, 必須是同一個scope中的draggable和droppable才可以互相拖放.
例如:
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable控件的accept選項默認是'*', 看起來數draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由於scope的約束, draggable_a只能放入到droppable_a, draggable_b只能發乳到droppable_b中.
注意: 這個選項就和變量的名稱空間的意義類似. 默認值是'default', 說明如果不指定, 大家都還是有scope的, 名字是default而已.
[代碼示例]
[初始化]
$('.selector').draggable({ scope: 'tasks' });
[獲取屬性值]
var scope = $('.selector').draggable('option', 'scope');
[設置屬性值]
$('.selector').draggable('option', 'scope', 'tasks');
scroll:
[類型]Boolean
[默認值]true
[產生影響]
如果設置為true, 在拖動過程中超出可拖動控件容器的時候, 容器自動增加滾動條
[代碼示例]
[初始化]
$('.selector').draggable({ scroll: false });
[獲取屬性值]
var scope = $('.selector').draggable('option', 'scope');
[設置屬性值]
$('.selector').draggable('option', 'scroll', false);
scrollSensitivity:
[類型]整數值
[默認值]20
[產生影響]
滾動條的敏感度.
下面所屬的鼠標指針是指在draggable控件移動過程中, 鼠標所處位置.
鼠標指針和與draggable控件所在容器的邊距離為多少的時候, 滾動條開始滾動.
[代碼示例]
[初始化]
$('.selector').draggable({ scrollSensitivity: 40 });
[獲取屬性值]
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[設置屬性值]
$('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[類型]整數值
[默認值]20
[產生影響]
由於scrollSensitivity導致的滾動發生時, 滾動條一次滾動多少像素值.
[代碼示例]
[初始化]
$('.selector').draggable({ scrollSpeed: 40 });
[獲取屬性值]
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
[設置屬性值]
$('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[類型]Boolean, 選擇器
[默認值]false
[產生影響]
吸附功能, 設置為true等價與設置選擇器.ui-draggable, 具體效果是在選擇器指定的所有元素上, 當前的draggable控件都可以實現吸附功能, 吸附就是拖動過程中, 靠近但是還沒有挨上目標組件是, 自動的將正在拖動的組件吸過去.
[代碼示例]
[初始化]
$('.selector').draggable({ snap: true });
[獲取屬性值]
var snap = $('.selector').draggable('option', 'snap');
[設置屬性值]
$('.selector').draggable('option', 'snap', true);
snapMode:
[類型]字符串, 可選值如下
'inner': 在指定的元素內部可以吸附
'outer': 在指定元素外部可以吸附
'both': 裡面外面都可以吸附.
[默認值]'both'
[產生影響]
設定吸附時候的模式.
[代碼示例]
[初始化]
$('.selector').draggable({ snapMode: 'outer' });
[獲取屬性值]
var snapMode = $('.selector').draggable('option', 'snapMode');
[設置屬性值]
$('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[類型]整數
[默認值]20
[產生影響]
設定離目標對象的邊多少像素的時候, 進行吸附.
[代碼示例]
[初始化]
$('.selector').draggable({ snap: true });
[獲取屬性值]
var snap = $('.selector').draggable('option', 'snap');
[設置屬性值]
$('.selector').draggable('option', 'snap', true);
stack:
[類型]對象{group: '.selector', min: 50}
[默認值]false
[產生影響]
一次初始化一組draggable控件的時候, 將其中的一些draggable控件以給定選擇器選擇, 作為一組, 這時, 這一組draggable控件就可以實現當前被拖動的始終在最前效果, min用來指定這一組的z-index值的最小值.
[代碼示例]
[初始化]
$('.selector').draggable({ stack: { group: 'products', min: 50 } });
[獲取屬性值]
var stack = $('.selector').draggable('option', 'stack');
[設置屬性值]
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[類型]整數
[默認值]false
[產生影響]
拖動時的helper(跟隨鼠標移動的控件)的z-index值. z-index就是css中的層疊層數, 數值越大, 越在上層.
[代碼示例]
[初始化]
$('.selector').draggable({ zIndex: 2700 });
[獲取屬性值]
var zIndex = $('.selector').draggable('option', 'zIndex');
[設置屬性值]
$('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖動開始, 指鼠標按下, 開始移動.
[類型]dragstart
[回調函數接受的參數]
event: 原生的浏覽器事件.
ui: JQuery的ui對象
this: 當前拖動的控件DOM對象
drag: 拖動過程中鼠標移動.
[類型]drag
[回調函數接受的參數]
event: 原生的浏覽器事件.
ui: JQuery的ui對象
this: 當前拖動的控件DOM對象
stop: 拖動結束.
[類型]dragstop
[回調函數接受的參數]
event: 原生的浏覽器事件.
ui: JQuery的ui對象
this: 當前拖動的控件DOM對象
[代碼示例]
初始化時設置事件.
$('.selector').draggable({
start: function(event, ui) { alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});
動態的綁定事件. 動態綁定時候, 使用的事件名就是事件的類型.
$(".selector").bind('dragstart', function(event, ui) {
alert(this);
});
$(".selector").bind('drag', function(event, ui) {
alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
alert(this);
});
[方法]
destroy: 完全移除一個可拖動控件, 使其回退到該元素被初始化成可拖動控件之前的狀態.
[代碼示例]
$(".selector").progressbar('destroy');
將之前初始化的.selector指定的可拖動控件銷毀, 使其返回初始化之前的狀態.
disable: 將可拖動控件樣式改變成為失效, 與enable對應.
enable: 將可拖動控件樣式改變為允許, 與disable對應.
option: 獲取或設置可拖動控件的選項, 第二個參數是選項名, 第三個參數是值. 如果不指定值, 就是獲取, 指定值, 就是設置.
[/code<>]
[總結]
addClasses: 用來設置是否添加ui-draggable樣式.
appendTo: 設置追加到什麼地方
axis: 設置拖動的方向
cancel, handle: 設置控制整個控件拖動動作的區域, cancel指定區域不能拖動, handle指定區域控制控件拖動.
connectToSortable: 需要和sortable集成.
containment: 設置控件可拖動范圍
cursor, cursorAt: 設置拖動過程中, 鼠標的樣式及相對空間自身的位置.
delay, distance: 設置拖動的延遲, delay設置延遲時間, distance設置延遲距離, 目的是防止誤點擊帶來的不期望拖動.
grid: 設置拖動過程移動的單位(以小格的方式移動)
helper: 設置拖動過程中, 跟隨鼠標移動的組件.
iframeFix: 解決拖動過程中與iframe層疊後的事件問題.
opacity: 拖動過程helper的不透明度.
refreshPositions: 設置後drop過程中, 鼠標每次移動都會計算位置.
revert, revertDuration: 設置撤銷移動相關.
scope: 設定draggable的域, 用來和droppable結合使用時確定可放入的目標.
scroll, scrollSensitivity, scrollSpeed: 設置拖動過程中帶來的滾動條相關問題.
snap, snapMode, snapTolerance: 設置吸附的相關屬性.
stack, zIndex: 設置控件的層次