jQuery EasyUI Draggable拖动组件
更新时间：2017年03月01日 08:37:33 作者：hai_cheng001
这篇文章主要为大家详细介绍了jQuery EasyUI Draggable拖动组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
上文已经提到过了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拖动组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的.2016-04-04
这篇文章主要是对jquery中Tab效果和动态加载的简单实例进行了介绍，需要的朋友可以过来参考下。希望对大家有所帮助2013-12-12
随鼠标上下滚动，在某些时候需要类似的效果，下面有个不错的示例可以实现此效果，需要的朋友可以参考下2013-12-12
基于jQuery UI CSS Framework开发Widget的经验
jQuery UI CSS Framework是jQuery UI中的一个样式框架，可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。2010-08-08
这篇文章主要介绍了jQuery中removeProp()方法用法,实例分析了removeProp()方法的功能、定义及删除由prop()方法设置的属性时的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery中noconflict函数的实现原理分解,noconflict是用来防止变量冲突的,本文就分解了它的实现原理,并分析了它的实现源码,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了Html5+jQuery+CSS制作相册小记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，javascript分页简单搞定。2010-07-07
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件，本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件，需要的朋友参考下2015-11-11
Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。2015-08-08
最新评论