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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
如何使用Javascript中的this关键字
May 28 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
js实现简单点赞操作
2020/03/17 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
使用python实现BLAST
2018/02/12 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python基于execjs运行js过程解析
2020/11/27 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
庆七一活动方案
2014/01/25 职场文书
庆元旦活动总结
2014/07/09 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
道歉短信大全
2015/05/12 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android