jQuery EasyUI Draggable拖动组件


Posted in Javascript onMarch 01, 2017

上文已经提到过了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拖动组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 #Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP多进程编程实例详解
2017/07/19 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python Celery定时任务的示例
2018/03/13 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
温馨提示标语
2014/06/26 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
开天辟地观后感
2015/06/09 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis