欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery EasyUI Draggable拖动组件

程序员文章站 2023-11-12 20:59:34
上文已经提到过了jquery easyui插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的draggable组件同样有两种方式加载：...

上文已经提到过了jquery easyui插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的draggable组件同样有两种方式加载：

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

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</div>

（2）、js 加载调用

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

同样上文也说了，使用class属性不利于我们拓展组件的其他属性，所以我们使用js调用的方式，后面的文章也是使用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> 
<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', 开始拖动时的句柄,就是点击哪里可以拖动，参数是一个jq选择器 
    //disabled : true, 设置为true的时候,禁止拖动 
    //edge : 0,  
    //axis : 'v',    不写：任意拖动 值为v：垂直拖动  值为h：水平拖动 
    //proxy : 'clone', 当使用'clone'的时候则克隆一个替代元素拖动，如果指定一个函数，则可以自定义替代元素。 
    deltax : 50,//被拖动元素对应于当前光标位置x 
    deltay : 50,//被拖动元素对应于当前光标位置y 
    proxy : function (source) { 
      var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); 
      p.html($(source).html()).appendto('body'); 
      return p; 
    } 
    /** 
    可触发的事件： 
     
    onbeforedrag : function (e) { 
      alert('拖动前触发！'); 
    }, 
    onbeforedrag : function (e) { 
      //return false; 
    }, 
    onstartdrag : function (e) { 
      alert('拖动开始触发！'); 
      console.log($('#box').draggable('proxy')); 
    }, 
    ondrag : function (e) { 
      //alert('拖动过程触发！'); 
    }, 
    onstopdrag : function (e) { 
      alert('拖动结束后触发！'); 
    } 
    */ 
     
     
  }); 
   
  //$('#box').draggable('disable');//禁止拖动 
   
  //$('#box').draggable('enable');//可以拖动 
 
  //alert($('#box').draggable('options'));  //返回对象属性 
   
}); 
 
</script> 
</head> 
<body> 
  <div id="box" style="width:400px;height:200px;background:orange;"> 
    <span id="pox">内容部分</span> 
  </div> 
</body> 
</html>

点击下载源代码：jquery easyui draggable拖动组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： IE浏览器验证码输入框显示的很小该怎么办？

下一篇： Oracle数据库的十种重新启动步骤

推荐阅读