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 子窗体父窗体相互传值方法
May 31 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
职工趣味运动会方案
2014/02/10 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
个人创业事迹材料
2014/12/30 职场文书
给医院的感谢信
2015/01/21 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
js之ajax文件上传
2021/05/13 Javascript
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS