From 86ac112844d0e7723c9aa930ff93e7db70bd93e1 Mon Sep 17 00:00:00 2001 From: Catouse Date: Wed, 2 Jul 2014 15:10:06 +0800 Subject: [PATCH] + added draggable.js. --- src/js/draggable.js | 93 +++++++++++++++++++++++++++++++++++++++++++++ src/js/zui.js | 1 + 2 files changed, 94 insertions(+) create mode 100644 src/js/draggable.js diff --git a/src/js/draggable.js b/src/js/draggable.js new file mode 100644 index 000000000..b4773c1ed --- /dev/null +++ b/src/js/draggable.js @@ -0,0 +1,93 @@ +/* Draggable */ ++function($, window, document, Math) +{ + "use strict"; + + var Draggable = function(element, options) + { + this.$ = $(element); + this.options = this.getOptions(options); + + this.init(); + }; + + Draggable.DEFAULTS = {container: 'body'}; + + Draggable.prototype.getOptions = function (options) + { + options = $.extend({}, Draggable.DEFAULTS, this.$.data(), options); + return options; + }; + + Draggable.prototype.init = function() + { + this.handleMouseEvents(); + } + + Draggable.prototype.handleMouseEvents = function() + { + var $e = this.$, + setting = this.options; + + $e.mousedown(function(event) + { + if(setting.hasOwnProperty('before') && $.isFunction(setting['before'])) + { + var isSure = setting['before']({event: event, element: $e}); + if (isSure != undefined && (!isSure)) return; + } + + var $container = $(setting.container), + pos = $e.offset(); + var cPos = $container.offset(), + startOffset = {x: event.pageX - pos.left + cPos.left, y: event.pageY - pos.top + cPos.top}; + + $e.addClass('drag-ready'); + $(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp); + event.preventDefault(); + + function mouseMove(event) + { + var mX = event.pageX, + mY = event.pageY; + var dragPos = {left: mX-startOffset.x, top: mY-startOffset.y}; + + $e.removeClass('drag-ready').addClass('dragging').css(dragPos); + + if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag'])) + { + setting['drag']({event: event, element: $e, startOffset: startOffset, pos: dragPos}); + } + } + + function mouseUp(event) + { + var endPos = {left: event.pageX - startOffset.x, top: event.pageY - startOffset.y}; + $e.css(endPos).removeClass('dragging'); + + $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp); + if(setting.hasOwnProperty('finish') && $.isFunction(setting['finish'])) + { + setting['finish']({event: event, target: target, element: $e, pos: endPos); + } + event.preventDefault(); + } + }); + } + + $.fn.draggable = function(option) + { + return this.each(function() + { + var $this = $(this); + var data = $this.data('zui.draggable'); + var options = typeof option == 'object' && option; + + if (!data) $this.data('zui.draggable', (data = new Draggable(this, options))); + + if (typeof option == 'string') data[option](); + }) + }; + + $.fn.draggable.Constructor = Draggable; +}(jQuery,window,document,Math); diff --git a/src/js/zui.js b/src/js/zui.js index 55845163c..35a27577c 100644 --- a/src/js/zui.js +++ b/src/js/zui.js @@ -22,6 +22,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") } // @koala-append "tab.js" // @koala-append "image.ready.js" // @koala-append "lightbox.js" +// @koala-append "draggable.js" // @koala-append "droppable.js" // @koala-append "dashboard.js" // @koala-append "menu.js" -- GitLab