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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
javascript中的数据类型检测方法详解
Aug 07 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 while循环控制的简单实例
2016/05/30 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python 反向输出字符串的方法
2018/07/16 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python中pickle模块浅析
2020/12/29 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
高级编程求职信模板
2014/02/16 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
保密协议书范本
2014/04/22 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
服务器SVN搭建图文安装过程
2022/06/21 Servers
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS