Draggable(拖动)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法，这个组件不依赖于其 他组件。
一．加载方式
//class 加载方式
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</div>
//JS 加载调用
$('#box').draggable();
draggable()将一个元素实行拖拽方法，接收一个对象，对象里是属性
二．属性列表
revert false/boolean 设置为 true，则拖动停止时返回起始位置，拖动停止时返回起始位置
$(function () {
$('#box').draggable({
revert:'true' //拖动停止时返回起始位置
});
});
cursor move/string 拖动时的 CSS 指针样式，拖动时的 CSS 鼠标指针样式
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
cursor:'move' //拖动时的 CSS 鼠标指针样式
});
});
Proxy null/string、function当使用'clone'，则克隆一个替代元素拖动。如果指定一个函数，则自定义替代元素。 克隆元素拖动
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
// edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
// axis:'h' //设置拖动为垂直'v'，还是水平'h'
proxy: function (source) {
var p = $('<div style="border:1px solid #ccc; width:400px; height:200px;"></div>');
p.html($(source).html()).appendTo('body');
return p;
}
});
});
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
// edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
// axis:'h' //设置拖动为垂直'v'，还是水平'h'
Proxy:'clone', //克隆元素拖动
deltaX:20, //拖动时鼠标在元素的x位置
deltaY:20 //拖动时鼠标在元素的y位置
//以上3个一搬配合使用
});
});
deltaX null/number 被拖动的元素对应于当前光标位置 x ，拖动时鼠标在元素的x位置
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
// edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
// axis:'h' //设置拖动为垂直'v'，还是水平'h'
Proxy:'clone', //克隆元素拖动
deltaX:20, //拖动时鼠标在元素的x位置
deltaY:20 //拖动时鼠标在元素的y位置
//以上3个一搬配合使用
});
});
deltaY null/number 被拖动的元素对应于当前光标位置 y，拖动时鼠标在元素的y位置
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
// edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
// axis:'h' //设置拖动为垂直'v'，还是水平'h'
Proxy:'clone', //克隆元素拖动
deltaX:20, //拖动时鼠标在元素的x位置
deltaY:20 //拖动时鼠标在元素的y位置
//以上3个一搬配合使用
});
});
handle null/selector 开始拖动的句柄，就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
});
});
disabled false/boolean 设置为 true，则停止拖动，禁止拖动
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
disabled:true //禁止拖动
});
});
edge 0/number 可以在其中拖动的容器的宽度，设置可拖动区域在区块里的宽度，相当于css的外边距，如设置20，则区块上下左右20px的范围不可以拖动
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
});
});
axis null/string 设置拖动为垂直'v'，还是水平'h'，设置拖动为垂直'v'，还是水平'h'
$(function () {
$('#box').draggable({
// revert:'true' //拖动停止时返回起始位置
// handle:'#pox' //就是设置拖动元素里指定的元素才可以拖动，值为可拖动元素的id
// disabled:true //禁止拖动
// edge:20 //设置可拖动区域在区块里的宽度，相当于css的外边距
axis:'h' //设置拖动为垂直'v'，还是水平'h'
});
});
三．事件列表
onBeforeDrag e 拖动之前触发，返回 false 将取消拖动
$(function () {
$('#box').draggable({
onBeforeDrag:function (e) { // 拖动之前触发，返回 false 将取消拖动
alert('拖动之前触发');
return false;
}
});
});
onStartDrag e 拖动开始时触发
$(function () {
$('#box').draggable({
onStartDrag: function (e) {
alert('拖动开始时触发');
}
});
});
onDrag e 拖动过程中触发，不能拖动时返回 false
$(function () {
$('#box').draggable({
onDrag: function (e) {
alert('拖动过程中触发，不能拖动时返回 false');
}
});
});
onStopDrag e 拖动停止时触发
$(function () {
$('#box').draggable({
onStopDrag: function (e) {
alert('拖动停止时触发');
}
});
});
四．方法列表
options none 返回属性对象
$(function () {
$('#box').draggable({
revert:'true' //拖动停止时返回起始位置
});
// $('#box').draggable('disable'); //disable none 禁止拖动
// $('#box').draggable('enable'); //enable none 允许拖动
alert($('#box').draggable('options')); //返回属性对象
});
proxy none 如果代理属性被设置则返回该拖动代理元素
$(function () {
$('#box').draggable({
onStartDrag: function (e) {
alert($('#box').draggable('proxy'));
}
});
});
enable none 允许拖动
$(function () {
$('#box').draggable({
});
$('#box').draggable('disable'); //disable none 禁止拖动
$('#box').draggable('enable'); //enable none 允许拖动
});
disable none 禁止拖动
$(function () {
$('#box').draggable({
});
$('#box').draggable('disable'); //disable none 禁止拖动
$('#box').draggable('enable'); //enable none 允许拖动
});
$.fn.draggable.defaults 重写默认值对象
PS：我们可以使用$.fn.draggable.defaults 重写默认值对象。
$(function () {
$.fn.draggable.defaults.cursor = 'text'; //重写默认值对象,重写后以后的拖动都是这个默认鼠标指针
$('#box').draggable({
});
});