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 技巧和窍门整理(8个)
Apr 22 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
使用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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP curl使用实例
2015/07/02 PHP
php实现websocket实时消息推送
2018/03/30 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
js word表格动态添加代码
2010/06/07 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python实现k-means算法
2018/02/23 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python statsmodel的使用
2020/12/21 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
面试必备的求职信
2014/05/25 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android