前言
使用$.fn.draggable.defaults重写默认值对象。下载该插件翻译源码
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878 --拖动
*/
(function ($) {
var dragging = false;
function drag(e) {
var target = $.data(e.data.target, "draggable");
var options = target.options;
var proxy = target.proxy;
var dragData = e.data;
var left = dragData.startLeft + e.pageX - dragData.startX;
var top = dragData.startTop + e.pageY - dragData.startY;
if (proxy) {
if (proxy.parent()[0] == document.body) {
if (options.deltaX != null && options.deltaX != undefined) {
left = e.pageX + options.deltaX;
} else {
left = e.pageX - e.data.offsetWidth;
}
if (options.deltaY != null && options.deltaY != undefined) {
top = e.pageY + options.deltaY;
} else {
top = e.pageY - e.data.offsetHeight;
}
} else {
if (options.deltaX != null && options.deltaX != undefined) {
left += e.data.offsetWidth + options.deltaX;
}
if (options.deltaY != null && options.deltaY != undefined) {
top += e.data.offsetHeight + options.deltaY;
}
}
}
if (e.data.parent != document.body) {
left += $(e.data.parent).scrollLeft();
top += $(e.data.parent).scrollTop();
}
if (options.axis == "h") {//拖动方向
dragData.left = left;
} else {
if (options.axis == "v") {
dragData.top = top;
} else {
dragData.left = left;
dragData.top = top;
}
}
}; function applyDrag(e) {
var Drag = $.data(e.data.target, "draggable");
var options = Drag.options;
var proxy = Drag.proxy;
if (!proxy) {
proxy = $(e.data.target);
}
proxy.css({ left: e.data.left, top: e.data.top });
$("body").css("cursor", options.cursor);
}; function doDown(e) {
dragging = true;
var Drag = $.data(e.data.target, "draggable");
var options = Drag.options;
var droppables = $(".droppable").filter(function () {
return e.data.target != this;
}).filter(function () {
var accept = $.data(this, "droppable").options.accept;
if (accept) {
return $(accept).filter(function () {
return this == e.data.target;
}).length > 0;
} else {
return true;
}
});
Drag.droppables = droppables;
var proxy = Drag.proxy;
if (!proxy) {
if (options.proxy) {
if (options.proxy == "clone") {
proxy = $(e.data.target).clone().insertAfter(e.data.target);
} else {
proxy = options.proxy.call(e.data.target, e.data.target);
}
Drag.proxy = proxy;
} else {
proxy = $(e.data.target);
}
}
proxy.css("position", "absolute");
drag(e);
applyDrag(e);
options.onStartDrag.call(e.data.target, e);
return false;
}; function doMove(e) {
var Dtarget = $.data(e.data.target, "draggable");
drag(e);
if (Dtarget.options.onDrag.call(e.data.target, e) != false) {
applyDrag(e);
}
var source = e.data.target;
Dtarget.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable("options").disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (!this.entered) {
$(this).trigger("_dragenter", [source]);
this.entered = true;
}
$(this).trigger("_dragover", [source]);
} else {
if (this.entered) {
$(this).trigger("_dragleave", [source]);
this.entered = false;
}
}
});
return false;
}; function doUp(e) {
dragging = false;
doMove(e);
var DragObj = $.data(e.data.target, "draggable");
var proxy = DragObj.proxy;
var options = DragObj.options;
if (options.revert) {
if (checkDrop() == true) {
$(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
} else {
if (proxy) {
var left, top;
if (proxy.parent()[0] == document.body) {
left = e.data.startX - e.data.offsetWidth;
top = e.data.startY - e.data.offsetHeight;
} else {
left = e.data.startLeft;
top = e.data.startTop;
}
proxy.animate({ left: left, top: top }, function () {
removeProxy();
});
} else {
$(e.data.target).animate({ left: e.data.startLeft, top: e.data.startTop }, function () {
$(e.data.target).css("position", e.data.startPosition);
});
}
}
} else {
$(e.data.target).css({ position: "absolute", left: e.data.left, top: e.data.top });
checkDrop();
}
options.onStopDrag.call(e.data.target, e);
$(document).unbind(".draggable");
setTimeout(function () {
$("body").css("cursor", "");
}, 100);
function removeProxy() {
if (proxy) {
proxy.remove();
}
DragObj.proxy = null;
};
function checkDrop() {
var dropped = false;
DragObj.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable("options").disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (options.revert) {
$(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
}
removeProxy();
$(this).trigger("_drop", [e.data.target]);
dropped = true;
this.entered = false;
return false;
}
});
if (!dropped && !options.revert) {
removeProxy();
}
return dropped;
};
return false;
};
//实例化插件
$.fn.draggable = function (options, param) {
if (typeof options == "string") {
return $.fn.draggable.methods[options](this, param);
}
return this.each(function () {
var options;
var target = $.data(this, "draggable");
if (target) {
target.handle.unbind(".draggable");
options = $.extend(target.options, options);
} else {
options = $.extend({}, $.fn.draggable.defaults, $.fn.draggable.parseOptions(this), options || {});
}
if (options.disabled == true) {
$(this).css("cursor", "");
return;
}
var handle = null;
if (typeof options.handle == "undefined" || options.handle == null) {
handle = $(this);
} else {
handle = (typeof options.handle == "string" ? $(options.handle, this) : options.handle);
}
$.data(this, "draggable", { options: options, handle: handle });
handle.unbind(".draggable").bind("mousemove.draggable", { target: this }, function (e) {
if (dragging) {
return;
}
var options = $.data(e.data.target, "draggable").options;
if (checkArea(e)) {
$(this).css("cursor", options.cursor);
} else {
$(this).css("cursor", "");
}
}).bind("mouseleave.draggable", { target: this }, function (e) {
$(this).css("cursor", "");
}).bind("mousedown.draggable", { target: this }, function (e) {
if (checkArea(e) == false) {
return;
}
$(this).css("cursor", "");
var position = $(e.data.target).position();
var offset = $(e.data.target).offset();
var data = {
startPosition: $(e.data.target).css("position"),
startLeft: position.left, startTop: position.top,
left: position.left,
top: position.top,
startX: e.pageX,
startY: e.pageY,
offsetWidth: (e.pageX - offset.left),
offsetHeight: (e.pageY - offset.top),
target: e.data.target,
parent: $(e.data.target).parent()[0]
};
$.extend(e.data, data);
var options = $.data(e.data.target, "draggable").options;
if (options.onBeforeDrag.call(e.data.target, e) == false) {
return;
}
$(document).bind("mousedown.draggable", e.data, doDown);
$(document).bind("mousemove.draggable", e.data, doMove);
$(document).bind("mouseup.draggable", e.data, doUp);
});
function checkArea(e) {
var dropObj = $.data(e.data.target, "draggable");
var handle = dropObj.handle;
var offset = $(handle).offset();
var left = $(handle).outerWidth();
var top = $(handle).outerHeight();
var t = e.pageY - offset.top;
var r = offset.left + left - e.pageX;
var b = offset.top + top - e.pageY;
var l = e.pageX - offset.left;
return Math.min(t, r, b, l) > dropObj.options.edge;
};
});
};
//拖动默认的方法
$.fn.draggable.methods = {
//返回属性对象
options: function (jq) {
return $.data(jq[0], "draggable").options;
},
//如果代理属性被设置则返回该拖动代理元素
proxy: function (jq) {
return $.data(jq[0], "draggable").proxy;
},
//允许拖动
enable: function (jq) {
return jq.each(function () {
$(this).draggable({ disabled: false });
});
},
//禁止拖动
disable: function (jq) {
return jq.each(function () {
$(this).draggable({ disabled: true });
});
}
};
//属性转换器
$.fn.draggable.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ["cursor", "handle", "axis", { "revert": "boolean", "deltaX": "number", "deltaY": "number", "edge": "number" }]), { disabled: (t.attr("disabled") ? true : undefined) });
};
//拖动默认配置--属性 事件
$.fn.draggable.defaults = {
proxy: null,//在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象
revert: false,//如果设置为true，在拖动停止时元素将返回起始位置
cursor: "move",//拖动时的CSS指针样式
deltaX: null,//被拖动的元素对应于当前光标位置x
deltaY: null,//被拖动的元素对应于当前光标位置y
handle: null,//开始拖动的句柄
disabled: false,//如果设置为true，则停止拖动
edge: 0,//可以在其中拖动的容器的宽度
axis: null,//定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动
//在拖动之前触发，返回false将取消拖动
onBeforeDrag: function (e) {
},
//在目标对象开始被拖动时触发
onStartDrag: function (e) {
},
//在拖动过程中触发，当不能再拖动时返回false
onDrag: function (e) {
},
//在拖动停止时触发
onStopDrag: function (e) {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Draggable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.draggable.js"></script>
</head>
<body>
<h2>Basic Draggable</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Move the boxes below by clicking on it with mouse.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
</div>
</body>
</html>