快捷導(dǎo)航

jQuery EasyUI Draggable拖動(dòng)組件

更新時(shí)間：2017年03月01日 08:37:33 作者：hai_cheng001

這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Draggable拖動(dòng)組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上文已經(jīng)提到過了jQuery EasyUI插件引用一般我們常用的有兩種方式（排除easyload加載方式），所以本篇要總結(jié)的Draggable組件同樣有兩種方式加載：

（1）、使用class加載方式：

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
內(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';//*****采用這種方式重寫默認(rèn)值 
 
  $('#box').draggable({ 
    //revert : true,  默認(rèn)值為false 設(shè)置為true的時(shí)候拖動(dòng)結(jié)束后返回起始位置 
    //cursor : 'text', 定義拖動(dòng)時(shí)指針的樣式 
    //handle : '#pox', 開始拖動(dòng)時(shí)的句柄,就是點(diǎn)擊哪里可以拖動(dòng)，參數(shù)是一個(gè)JQ選擇器 
    //disabled : true, 設(shè)置為true的時(shí)候,禁止拖動(dòng) 
    //edge : 0,  
    //axis : 'v',    不寫：任意拖動(dòng) 值為v：垂直拖動(dòng)  值為h：水平拖動(dòng) 
    //proxy : 'clone', 當(dāng)使用'clone'的時(shí)候則克隆一個(gè)替代元素拖動(dòng)，如果指定一個(gè)函數(shù)，則可以自定義替代元素。 
    deltaX : 50,//被拖動(dòng)元素對(duì)應(yīng)于當(dāng)前光標(biāo)位置X 
    deltaY : 50,//被拖動(dòng)元素對(duì)應(yīng)于當(dāng)前光標(biāo)位置Y 
    proxy : function (source) { 
      var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); 
      p.html($(source).html()).appendTo('body'); 
      return p; 
    } 
    /** 
    可觸發(fā)的事件： 
     
    onBeforeDrag : function (e) { 
      alert('拖動(dòng)前觸發(fā)！'); 
    }, 
    onBeforeDrag : function (e) { 
      //return false; 
    }, 
    onStartDrag : function (e) { 
      alert('拖動(dòng)開始觸發(fā)！'); 
      console.log($('#box').draggable('proxy')); 
    }, 
    onDrag : function (e) { 
      //alert('拖動(dòng)過程觸發(fā)！'); 
    }, 
    onStopDrag : function (e) { 
      alert('拖動(dòng)結(jié)束后觸發(fā)！'); 
    } 
    */ 
     
     
  }); 
   
  //$('#box').draggable('disable');//禁止拖動(dòng) 
   
  //$('#box').draggable('enable');//可以拖動(dòng) 
 
  //alert($('#box').draggable('options'));  //返回對(duì)象屬性 
   
}); 
 
</script> 
</head> 
<body> 
  <div id="box" style="width:400px;height:200px;background:orange;"> 
    <span id="pox">內(nèi)容部分</span> 
  </div> 
</body> 
</html>

點(diǎn)擊下載源代碼：jQuery EasyUI Draggable拖動(dòng)組件

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: