easyui Draggable组件实现拖动效果


Posted in Javascript onAugust 19, 2015

easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间。

Draggable的加载方式有两种:

1,通过class加载,如下:

<div id="box" class="easyui-draggable"></div>

通过JS加载,如下:

$('#box').draggable();

以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用easyui已经写好的函数,来实现jQuery效果的。

Draggable的属性:

revert    当值为true时,拖动停止时返回起始位置,可以到处拖。

revert : boolean,

axis

限制拖动的方向,水平'h'?垂直'v'?这个和 revert组合起来比较有意思,设置拖动方向为

垂直的话就跟微信,微博刷新消息一样。

axis : String/'v'/'h',

proxy

克隆,就是拖动的时候要拖动的对象不变,然后在鼠标上复制一个要拖动的对象,当然也

可以是其他的,可以触发function。

proxy : null/String/function,

然后还有很多其他的属性,觉得并不是特别有趣。

cursor : move/String ,     //指定拖动时候指针的CSS样式 变得美美哒
deltaX : null/number,
deltaY : null/number,    //被拖动的元素对应于当前光标位置的x,y  就是给被   拖动元素与光标一个距离
handle : null/selector    //开始拖动的句柄   手柄!只能用手柄拖动!对的!
disabled : boolean        //设置为true是,不能拖动当先绑定的元素
edge : number             //可以在其中拖动的容器的宽度  从容器的上下左右往里算 ,就像一个矩形里面包着一个矩形 ,然后里面那只有鼠标放在里面矩形的时候元素才能被拖动   

例子:

$('#box').draggable({
  revert : true,
  cursor: 'text',
  handle : '#pox',
  disabled : false,
  edge : 50,
  axis :'v',
  proxy : 'clone',
  deltaX: 10,
  deltaY : 10,
  proxy: function(source){
    console.log('呵呵哒!');
  }
});

Draggable的事件:

onBeforeDrag  拖动之前触发,返回false将取消拖动

onBeforeDrag : function (e){
  alert('拖动之前触发');
  return false;
}

onStartDrag 拖动时触发

onStartDrag : function(e){
  alert('拖动时触发');
}

onDrag 拖动过程中触发,不能拖动事返回false

onDrag : function(e){
  alert('拖动过程触发');
}

onDrag 停止拖动时触发

onStopDrag : function (e){
  alert('在拖动停止时触发');
}

 Draggable 方法列表

options 返回属性对象

console.log($('#box').draggable('options'));

    proxy 如果代理属性被设置则返回该拖动代理元素

console.log($('#box').draggable('proxy'));

enable 可以被拖动

$('#box').draggable('enable');

disable 禁止被拖动

$('#box').draggable('disable');

我们来看个简单的例子

<pre class="brush:java;">html>
 
 
 
  <meta charset="UTF-8">
  <title>Basic Draggable - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
 
 
 
  <h2>Basic Draggable</h2>
  <p>Move the boxes below by clicking on it with mouse.</p>
  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
  </div>
  <script>
    $(function () {
 
      $("#title").draggable({
        proxy: function (a) {
          var a = $('<div class="proxy_div">你拖我干啥</div>');
          a.appendTo('body');
          return a;
        },
        cursor: 'pointer',
        edge: '6'
      });
    });
  </script>
 
 
</pre><br><br>

以上差不多就是Easyui 1.2.5  Draggable的全部属性,事件、方法和示例了, 如果有什么不对的话,欢迎评论,一起讨论和赐教。

Javascript 相关文章推荐
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
js获取微信版本号的方法
May 12 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
详解vue express启动数据服务
Jul 05 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 #Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
截获网站title标签之家内容的例子
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python发送邮件实例分享
2017/07/28 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python和php学习哪个更有发展
2020/06/17 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
药品业务员岗位职责
2014/04/17 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
公司周年庆活动方案
2014/08/25 职场文书
学生自我评语
2015/01/04 职场文书
小学教研工作总结2015
2015/05/13 职场文书
撤诉申请怎么写
2015/05/19 职场文书
建国大业观后感600字
2015/06/01 职场文书
Python之基础函数案例详解
2021/08/30 Python