溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
上文已經(jīng)提到過了jQuery EasyUI插件引用一般我們常用的有兩種方式（排除easyload加載方式），所以本篇要總結的Draggable組件同樣有兩種方式加載：
（1）、使用class加載方式：
<div id="box" class="easyui-draggable" > 內(nèi)容部分 </div>
（2）、JS 加載調(diào)用
$('#box').draggable();
同樣上文也說了，使用class屬性不利于我們拓展組件的其他屬性，所以我們使用JS調(diào)用的方式，后面的文章也是使用JS調(diào)用的方式。
該組件有若干屬性、方法及觸發(fā)事件，不在這里列舉了，都放到代碼示例里并且加上注釋了。
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />
<script>
$(function () {
$.fn.draggable.defaults.cursor = 'text';//*****采用這種方式重寫默認值
$('#box').draggable({
//revert : true, 默認值為false 設置為true的時候拖動結束后返回起始位置
//cursor : 'text', 定義拖動時指針的樣式
//handle : '#pox', 開始拖動時的句柄,就是點擊哪里可以拖動，參數(shù)是一個JQ選擇器
//disabled : true, 設置為true的時候,禁止拖動
//edge : 0,
//axis : 'v', 不寫：任意拖動 值為v：垂直拖動 值為h：水平拖動
//proxy : 'clone', 當使用'clone'的時候則克隆一個替代元素拖動，如果指定一個函數(shù)，則可以自定義替代元素。
deltaX : 50,//被拖動元素對應于當前光標位置X
deltaY : 50,//被拖動元素對應于當前光標位置Y
proxy : function (source) {
var p = $('<div >');
p.html($(source).html()).appendTo('body');
return p;
}
/**
可觸發(fā)的事件：
onBeforeDrag : function (e) {
alert('拖動前觸發(fā)！');
},
onBeforeDrag : function (e) {
//return false;
},
onStartDrag : function (e) {
alert('拖動開始觸發(fā)！');
console.log($('#box').draggable('proxy'));
},
onDrag : function (e) {
//alert('拖動過程觸發(fā)！');
},
onStopDrag : function (e) {
alert('拖動結束后觸發(fā)！');
}
*/
});
//$('#box').draggable('disable');//禁止拖動
//$('#box').draggable('enable');//可以拖動
//alert($('#box').draggable('options')); //返回對象屬性
});
</script>
</head>
<body>
<div id="box" >
<span id="pox">內(nèi)容部分</span>
</div>
</body>
</html>
點擊下載源代碼：jQuery EasyUI Draggable拖動組件
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
