前言
使用$.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="200px;height:150px;background:#fafafa;border:1px solid #ccc"></div> <div class="easyui-draggable" data-options="handle:'#title'" style="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>
插件效果
