easyui Draggable组件实现拖动效果
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的全部属性，事件、方法和示例了, 如果有什么不对的话，欢迎评论，一起讨论和赐教。
相关文章
这篇文章主要为大家详细介绍了jquery插件ajaxupload实现文件上传操作，感兴趣的小伙伴们可以参考一下2015-12-12
jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。2014-11-11
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度，这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件，这里推荐给小伙伴们。2015-04-04
要实现一个简单的列表，右上角有一个检索功能我们要实现的是列表检索功能，具体实例代码大家参考下本文2017-07-07
下面小编就为大家分享一篇利用JQUERY实现多个AJAX请求等待的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
本文给大家汇总介绍了jQuery的几种判断元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能够喜欢2017-02-02
这篇文章主要为大家详细介绍了jQuery实现图片轮播效果代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家详细介绍了jquery实现图片轮播和滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
表单验证一直很繁琐，特别是大点的表单，如果每个input都去单独写验证简直要写死人，最近写了一小段js统一的验证表单内容是否正确。需要的朋友可以参考下2015-09-09
下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论