JQuery EasyUI---Draggable( 拖動) 組件

時間 2019-12-08

標籤 jquery easyui draggable 拖動組件欄目 JQuery 简体版

原文原文鏈接

學習要點：

1.加載方式
2.屬性列表
3.事件列表
4.方法列表javascript

本節重點了解 EasyUI 中 Draggable(拖動)組件的使用方法，這個組件不依賴於其餘組件。css

一．加載方式

//class 加載方式這種方式看起來html代碼不乾淨，會污染html。建議使用JS的方式去加載html

<!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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="box" style="width:400px;height:200px;background:orange;">
    
</div>
</body>
</html>

//JS 加載調用java

//JS 加載調用
$('#box').draggable();

二．屬性列表

Draggable 屬性jquery

屬性名值說明
Proxy null/string、 function 當使用'clone'，則克隆一個替代元素拖動。若是指定一個函數，則自定義替代元素。
revert false/boolean 設置爲 true，則拖動中止時返回起始位置
cursor move/string 拖動時的 CSS 指針樣式
deltaX null/number 被拖動的元素對應於當前光標位置 x
deltaY null/number 被拖動的元素對應於當前光標位置 y
handle null/selector 開始拖動的句柄
disabled false/boolean 設置爲 true，則中止拖動
edge 0/number 能夠在其中拖動的容器的寬度
axis null/string 設置拖動爲垂直'v'，仍是水平'h'app

JS代碼函數

$('#box').draggable({
        revert : true,
        cursor : 'text',
        handle : '#pox',
        disabled : true,
        edge : 180,
        axis : 'v',
        proxy : 'clone',
        deltaX : 50,
        deltaY : 50,
        proxy : function (source) {
            var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');
            p.html($(source).html()).appendTo('body');
            return p;
        }
        
    });

3、事件列表學習

事件名傳參說明
onBeforeDrag e 拖動以前觸發，返回 false 將取消拖動
onStartDrag e 拖動開始時觸發
onDrag e 拖動過程當中觸發，不能拖動時返回 false
onStopDrag e 拖動中止時觸發ui

$('#box').draggable({
onBeforeDrag : function (e) {
        alert('拖動以前觸發！');
        return false;
},
onStartDrag : function (e) {
        alert('拖動時觸發！');
},
onDrag : function (e) {
        alert('拖動過程當中觸發！');
},
onStopDrag : function (e) {
        alert('在拖動中止時觸發！');
},
});

四．方法列表

事件名傳參說明
options none 返回屬性對象
proxy none 若是代理屬性被設置則返回該拖動代理元素
enable none 容許拖動
disable none 禁止拖動spa

$('#box').draggable('disable');
$('#box').draggable('enable');
console.log($('#box').draggable('options'));

上面的方法直接是元素綁定draggable以後直接傳入相關參數便可

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JQuery EasyUI---Draggable( 拖動) 組件

學習要點：

一． 加載方式

二． 屬性列表

四． 方法列表

一．加載方式

二．屬性列表

四．方法列表