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 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
第五章 php数组操作
2011/12/30 PHP
php中yii框架实例用法
2020/12/22 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
潜说js对象和数组
2011/05/25 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
谈谈python中GUI的选择
2018/03/01 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2015年招生工作总结
2015/05/04 职场文书
严以用权学习心得体会
2016/01/12 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
mysql事务隔离级别详情
2021/10/24 MySQL
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python