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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
vue component组件使用方法详解
Jul 14 Javascript
vue实现单选和多选功能
Aug 11 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
JavaScript ES6常用基础知识总结
Feb 09 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
学习ExtJS table布局
2009/10/08 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python构建基础的爬虫教学
2018/12/23 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python爬虫与反爬虫大战
2020/07/30 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
保送生自荐信范文
2013/10/06 职场文书
年终自我鉴定
2013/10/09 职场文书
教师研修随笔感言
2014/01/23 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
运动会方阵口号
2014/06/07 职场文书
春季运动会开幕词
2015/01/28 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
结婚仪式主持词
2015/06/29 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
小学美术教学反思
2016/02/17 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL