easyui Draggable組件實現(xiàn)拖動效果

更新時間：2015年08月19日 08:43:16 投稿：hebedich

Draggable是easyui中用于實現(xiàn)拖拽功能的一個插件。利用它，我們可以實現(xiàn)控件的拖拽效果。Draggble覆蓋默認值$.fn.draggable.defaults。

easyui做為一個封裝了JQusey的UI插件，其實還是蠻好用的，至少省了像我這種渣渣很多時間。

Draggable的加載方式有兩種：

1，通過class加載，如下：

<div id="box" class="easyui-draggable"></div>

通過JS加載，如下：

$('#box').draggable();

以上兩點需要注意的是不管是'easyui-draggable',還是draggable 都是固定的，他們都是通過調(diào)用easyui已經(jīng)寫好的函數(shù)，來實現(xiàn)jQuery效果的。

Draggable的屬性：

　　revert 當值為true時，拖動停止時返回起始位置，可以到處拖。

revert : boolean,

　　axis　　限制拖動的方向，水平'h'？垂直'v'？這個和 revert組合起來比較有意思，設置拖動方向為

　　　　　　垂直的話就跟微信，微博刷新消息一樣。

axis : String/'v'/'h',

　　proxy　　克隆，就是拖動的時候要拖動的對象不變，然后在鼠標上復制一個要拖動的對象，當然也

　　　　　　可以是其他的，可以觸發(fā)function。

proxy : null/String/function,
　　然后還有很多其他的屬性，覺得并不是特別有趣。

cursor : move/String ,     //指定拖動時候指針的CSS樣式變得美美噠
deltaX : null/number,
deltaY : null/number,    //被拖動的元素對應于當前光標位置的x,y 就是給被   拖動元素與光標一個距離
handle : null/selector    //開始拖動的句柄   手柄！只能用手柄拖動！對的！
disabled : boolean        //設置為true是，不能拖動當先綁定的元素
edge : number             //可以在其中拖動的容器的寬度從容器的上下左右往里算，就像一個矩形里面包著一個矩形，然后里面那只有鼠標放在里面矩形的時候元素才能被拖動

例子：

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵噠！');
  }
});

Draggable的事件：

　　onBeforeDrag 拖動之前觸發(fā)，返回false將取消拖動

onBeforeDrag : function (e){
  alert('拖動之前觸發(fā)');
  return false;
}

　　onStartDrag 拖動時觸發(fā)

onStartDrag : function(e){
  alert('拖動時觸發(fā)');
}

　　onDrag 拖動過程中觸發(fā)，不能拖動事返回false

onDrag : function(e){
  alert('拖動過程觸發(fā)');
}

　　onDrag 停止拖動時觸發(fā)

onStopDrag : function (e){
  alert('在拖動停止時觸發(fā)');
}

　Draggable 方法列表

　　options 返回屬性對象

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

　 proxy 如果代理屬性被設置則返回該拖動代理元素

console.log($('#box').draggable('proxy'));

　　enable 可以被拖動

$('#box').draggable('enable');

　　disable 禁止被拖動

$('#box').draggable('disable');

我們來看個簡單的例子

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
 
 
 
  <h2>Basic Draggable</h2>
  <p>Move the boxes below by clicking on it with mouse.</p>
  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的內(nèi)容</div>
  </div>
  <script>
    $(function () {
 
      $("#title").draggable({
        proxy: function (a) {
          var a = $('<div class="proxy_div">你拖我干啥</div>');
          a.appendTo('body');
          return a;
        },
        cursor: 'pointer',
        edge: '6'
      });
    });
  </script>
 
 
</pre><br><br>

以上差不多就是Easyui 1.2.5 Draggable的全部屬性，事件、方法和示例了, 如果有什么不對的話，歡迎評論，一起討論和賜教。

您可能感興趣的文章: