JQuery EasyUI(3)_easyui jquery3-优快云博客

本文详细介绍了EasyUI框架中的Draggable组件，包括其加载方式、属性、事件及方法。通过实例展示了如何使用Draggable组件实现元素的拖动功能，并提供了属性配置和事件处理的代码示例。

第三章：Draggable（拖动）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式

<!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" class="easyui-draggable" style="width:400px;height:200px;background:red;">
      内容部分
   </div>
  </body>
</html>

2.JS调用


<!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:red;">
      内容部分
    </div>   
  </body>
</html>

$(function(){
      $('#box').draggable();
});

二、属性列表：

Draggable属性
属性名	值	说明
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’。

<!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:red;">
      <span id="pox">内容部分</span>
    </div>   
  </body>
</html>

$(function(){
      $('#box').draggable({
         //revert:ture,

         //cursor:'text',

         //handle:'#pox',

         //disabled:ture,

         //edge:180,

         //exis:'v',

         //proxy:'clone',
         //delaX：50,
         //delaY:50,

         proxy:function(source){
          var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');
          p.html($(source).html()).appendTo('body');  
          return p;
    },  
         
  });
});

三、事件列表：

Draggable事件
事件名	传参	说明
onBeforeDrag	e	拖动之前触发，返回false将取消拖动。
onStartDrag	e	拖动开始时触发。
onDrag	e	拖动过程中触发，不能拖动时返回false。
onStopDrag	e	拖动停止时触发。


<!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:red;">
      <span id="pox">内容部分</span>
    </div>   
  </body>
</html>

$(function(){
      $('#box').draggable({
        
   //      onBeforeDrag:function(e){
   //         alert('拖动前触发！');
   //        };

   //         onBeforeDrag:function(e){
   //         return false;
   //        };

   //         onStartDrag:function(e){
   //         alert('拖动开始触发！');
   //        };

   //         onDrag:function(e){
   //         alert('拖动过程中触发！');
   //        };

            onStopDrag:function(e){
            alert('拖动结束时触发！');
           };
  });
});

四、方法列表：

Draggable方法
事件名	传参	说明
options	none	返回属性对象。
proxy	none	如果代理属性被设置则返回该拖动代理元素。
enable	none	允许拖动。
disable	none	禁止拖动。

<!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:red;">
      <span id="pox">内容部分</span>
    </div>   
  </body>
</html>

$(function(){
      $('#box').draggable({
        
       proxy:'clone',

       onStartDrag:function(e){
           console.log($('#box').draggable('proxy'));
           };
  });

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

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

PS：我们可以使用$.fn.draggable.defaults重写默认值对象。

$(function(){

      $.fn.draggable.defaults.cursor = 'text';      

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

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102570053

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！