* add droppable component to seperate bundle.

dist/lib/droppable/droppable.js

+/*!
+ * ZUI - v1.4.0 - 2016-01-22
+ * http://zui.sexy
+ * GitHub: https://github.com/easysoft/zui.git 
+ * Copyright (c) 2016 cnezsoft.com; Licensed MIT
+ */
+
+/* ========================================================================
+ * ZUI: jquery.extensions.js
+ * http://zui.sexy
+ * ========================================================================
+ * Copyright (c) 2014 cnezsoft.com; Licensed MIT
+ * ======================================================================== */
+
+
+(function($, window) {
+    'use strict';
+
+    /* Check jquery */
+    if(typeof($) === 'undefined') throw new Error('ZUI requires jQuery');
+
+    // ZUI shared object
+    if(!$.zui) $.zui = function(obj) {
+        if($.isPlainObject(obj)) {
+            $.extend($.zui, obj);
+        }
+    };
+
+    var lastUuidAmend = 0;
+    $.zui({
+        uuid: function() {
+            return(new Date()).getTime() * 1000 + (lastUuidAmend++) % 1000;
+        },
+
+        callEvent: function(func, event, proxy) {
+            if($.isFunction(func)) {
+                if(proxy !== undefined) {
+                    func = $.proxy(func, proxy);
+                }
+                var result = func(event);
+                if(event) event.result = result;
+                return !(result !== undefined && (!result));
+            }
+            return 1;
+        },
+
+        clientLang: function() {
+            var lang;
+            var config = window.config;
+            if(typeof(config) != 'undefined' && config.clientLang) {
+                lang = config.clientLang;
+            } else {
+                var hl = $('html').attr('lang');
+                lang = hl ? hl : (navigator.userLanguage || navigator.userLanguage || 'zh_cn');
+            }
+            return lang.replace('-', '_').toLowerCase();
+        }
+    });
+
+    $.fn.callEvent = function(name, event, model) {
+        var $this = $(this);
+        var dotIndex = name.indexOf('.zui.');
+        var shortName = name;
+        if(dotIndex < 0 && model && model.name) {
+            name += '.' + model.name;
+        } else {
+            shortName = name.substring(0, dotIndex);
+        }
+        var e = $.Event(name, event);
+
+        if((model === undefined) && dotIndex > 0) {
+            model = $this.data(name.substring(dotIndex + 1));
+        }
+
+        if(model && model.options) {
+            var func = model.options[shortName];
+            if($.isFunction(func)) {
+                $.zui.callEvent(model.options[shortName], e, model);
+            }
+        }
+        return e;
+    };
+}(jQuery, window));
+
+
+/* ========================================================================
+ * ZUI: droppable.js
+ * http://zui.sexy
+ * ========================================================================
+ * Copyright (c) 2014 cnezsoft.com; Licensed MIT
+ * ======================================================================== */
+
+
+(function($, document, Math) {
+    'use strict';
+
+    var Droppable = function(element, options) {
+        this.$ = $(element);
+        this.options = this.getOptions(options);
+
+        this.init();
+    };
+
+    Droppable.DEFAULTS = {
+        container: 'body',
+        // flex: false,
+        // nested: false,
+        deviation: 5,
+        sensorOffsetX: 0,
+        sensorOffsetY: 0
+    };
+
+    Droppable.prototype.getOptions = function(options) {
+        options = $.extend({}, Droppable.DEFAULTS, this.$.data(), options);
+        return options;
+    };
+
+    Droppable.prototype.callEvent = function(name, params) {
+        return $.zui.callEvent(this.options[name], params, this);
+    };
+
+    Droppable.prototype.init = function() {
+        this.handleMouseEvents();
+    };
+
+    Droppable.prototype.handleMouseEvents = function() {
+        var $e = this.$,
+            self = this,
+            setting = this.options,
+            BEFORE = 'before';
+
+        this.$triggerTarget = (setting.trigger ? ($.isFunction(setting.trigger) ? setting.trigger($e) : $e.find(setting.trigger)).first() : $e);
+
+        this.$triggerTarget.on('mousedown', function(event) {
+            if(setting.hasOwnProperty(BEFORE) && $.isFunction(setting[BEFORE])) {
+                var isSure = setting[BEFORE]({
+                    event: event,
+                    element: $e
+                });
+                if(isSure !== undefined && (!isSure)) return;
+            }
+
+            var $targets = $.isFunction(setting.target) ? setting.target($e) : $(setting.target),
+                target = null,
+                shadow = null,
+                $container = $(setting.container).first(),
+                isIn = false,
+                isSelf = true,
+                oldCssPosition,
+                startOffset = $e.offset(),
+                startMouseOffset = {
+                    left: event.pageX,
+                    top: event.pageY
+                };
+            var containerOffset = $container.offset();
+            var clickOffset = {
+                left: startMouseOffset.left - startOffset.left,
+                top: startMouseOffset.top - startOffset.top
+            };
+            var lastMouseOffset = {
+                left: startMouseOffset.left,
+                top: startMouseOffset.top
+            };
+
+            $e.addClass('drag-from');
+            $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
+            event.preventDefault();
+
+            function mouseMove(event) {
+                var mouseOffset = {
+                    left: event.pageX,
+                    top: event.pageY
+                };
+
+                // ignore small move
+                if(Math.abs(mouseOffset.left - startMouseOffset.left) < setting.deviation && Math.abs(mouseOffset.top - startMouseOffset.top) < setting.deviation) return;
+
+                if(shadow === null) // create shadow
+                {
+                    var cssPosition = $container.css('position');
+                    if(cssPosition != 'absolute' && cssPosition != 'relative' && cssPosition != 'fixed') {
+                        oldCssPosition = cssPosition;
+                        $container.css('position', 'relative');
+                    }
+
+                    shadow = $e.clone().removeClass('drag-from').addClass('drag-shadow').css({
+                        position: 'absolute',
+                        width: $e.outerWidth(),
+                        transition: 'none'
+                    }).appendTo($container);
+                    $e.addClass('dragging');
+
+                    self.callEvent('start', {
+                        event: event,
+                        element: $e
+                    });
+                }
+
+                var offset = {
+                    left: mouseOffset.left - clickOffset.left,
+                    top: mouseOffset.top - clickOffset.top
+                };
+                var position = {
+                    left: offset.left - containerOffset.left,
+                    top: offset.top - containerOffset.top
+                };
+                shadow.css(position);
+                lastMouseOffset.left = mouseOffset.left;
+                lastMouseOffset.top = mouseOffset.top;
+
+                var isNew = false;
+                isIn = false;
+
+                if(!setting.flex) {
+                    $targets.removeClass('drop-to');
+                }
+
+                var newTarget = null;
+                $targets.each(function() {
+                    var t = $(this);
+                    var tPos = t.offset();
+                    var tW = t.outerWidth(),
+                        tH = t.outerHeight(),
+                        tX = tPos.left + setting.sensorOffsetX,
+                        tY = tPos.top + setting.sensorOffsetY;
+
+                    if(mouseOffset.left > tX && mouseOffset.top > tY && mouseOffset.left < (tX + tW) && mouseOffset.top < (tY + tH)) {
+                        if(newTarget) newTarget.removeClass('drop-to');
+                        newTarget = t;
+                        if(!setting.nested) return false;
+                    }
+                });
+
+                if(newTarget) {
+                    isIn = true;
+                    var id = newTarget.data('id');
+                    if($e.data('id') != id) isSelf = false;
+                    if(target === null || (target.data('id') !== id && (!isSelf))) isNew = true;
+                    target = newTarget;
+                    if(setting.flex) {
+                        $targets.removeClass('drop-to');
+                    }
+                    target.addClass('drop-to');
+                }
+
+                if(!setting.flex) {
+                    $e.toggleClass('drop-in', isIn);
+                    shadow.toggleClass('drop-in', isIn);
+                } else if(target !== null && target.length) {
+                    isIn = true;
+                }
+
+                self.callEvent('drag', {
+                    event: event,
+                    isIn: isIn,
+                    target: target,
+                    element: $e,
+                    isNew: isNew,
+                    selfTarget: isSelf,
+                    clickOffset: clickOffset,
+                    offset: offset,
+                    position: {
+                        left: offset.left - containerOffset.left,
+                        top: offset.top - containerOffset.top
+                    },
+                    mouseOffset: mouseOffset
+                });
+                event.preventDefault();
+            }
+
+            function mouseUp(event) {
+                if(oldCssPosition) {
+                    $container.css('position', oldCssPosition);
+                }
+
+                if(shadow === null) {
+                    $e.removeClass('drag-from');
+                    $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
+                    self.callEvent('always', {
+                        event: event,
+                        cancel: true
+                    });
+                    return;
+                }
+
+                if(!isIn) target = null;
+                var isSure = true,
+                    mouseOffset = {
+                        left: event.pageX,
+                        top: event.pageY
+                    };
+                var offset = {
+                    left: mouseOffset.left - clickOffset.left,
+                    top: mouseOffset.top - clickOffset.top
+                };
+                var moveOffset = {
+                    left: mouseOffset.left - lastMouseOffset.left,
+                    top: mouseOffset.top - lastMouseOffset.top
+                };
+                lastMouseOffset.left = mouseOffset.left;
+                lastMouseOffset.top = mouseOffset.top;
+                var eventOptions = {
+                    event: event,
+                    isIn: isIn,
+                    target: target,
+                    element: $e,
+                    isNew: (!isSelf) && target !== null,
+                    selfTarget: isSelf,
+                    offset: offset,
+                    mouseOffset: mouseOffset,
+                    position: {
+                        left: offset.left - containerOffset.left,
+                        top: offset.top - containerOffset.top
+                    },
+                    lastMouseOffset: lastMouseOffset,
+                    moveOffset: moveOffset
+                };
+
+                isSure = self.callEvent('beforeDrop', eventOptions);
+
+                if(isSure && isIn) {
+                    self.callEvent('drop', eventOptions);
+                }
+
+                $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
+                $targets.removeClass('drop-to');
+                $e.removeClass('dragging').removeClass('drag-from');
+                shadow.remove();
+
+                self.callEvent('finish', eventOptions);
+                self.callEvent('always', eventOptions);
+
+                event.preventDefault();
+            }
+        });
+
+    };
+
+    Droppable.prototype.reset = function() {
+        this.$triggerTarget.off('mousedown');
+        this.handleMouseEvents();
+    };
+
+    $.fn.droppable = function(option) {
+        return this.each(function() {
+            var $this = $(this);
+            var data = $this.data('zui.droppable');
+            var options = typeof option == 'object' && option;
+
+            if(!data) $this.data('zui.droppable', (data = new Droppable(this, options)));
+
+            if(typeof option == 'string') data[option]();
+        });
+    };
+
+    $.fn.droppable.Constructor = Droppable;
+}(jQuery, document, Math));
+

dist/lib/droppable/droppable.min.js

+/*!
+ * ZUI - v1.4.0 - 2016-01-22
+ * http://zui.sexy
+ * GitHub: https://github.com/easysoft/zui.git 
+ * Copyright (c) 2016 cnezsoft.com; Licensed MIT
+ */
+
+!function(t,e){"use strict";if("undefined"==typeof t)throw new Error("ZUI requires jQuery");t.zui||(t.zui=function(e){t.isPlainObject(e)&&t.extend(t.zui,e)});var o=0;t.zui({uuid:function(){return 1e3*(new Date).getTime()+o++%1e3},callEvent:function(e,o,n){if(t.isFunction(e)){void 0!==n&&(e=t.proxy(e,n));var i=e(o);return o&&(o.result=i),!(void 0!==i&&!i)}return 1},clientLang:function(){var o,n=e.config;if("undefined"!=typeof n&&n.clientLang)o=n.clientLang;else{var i=t("html").attr("lang");o=i?i:navigator.userLanguage||navigator.userLanguage||"zh_cn"}return o.replace("-","_").toLowerCase()}}),t.fn.callEvent=function(e,o,n){var i=t(this),s=e.indexOf(".zui."),r=e;0>s&&n&&n.name?e+="."+n.name:r=e.substring(0,s);var a=t.Event(e,o);if(void 0===n&&s>0&&(n=i.data(e.substring(s+1))),n&&n.options){var l=n.options[r];t.isFunction(l)&&t.zui.callEvent(n.options[r],a,n)}return a}}(jQuery,window),function(t,e,o){"use strict";var n=function(e,o){this.$=t(e),this.options=this.getOptions(o),this.init()};n.DEFAULTS={container:"body",deviation:5,sensorOffsetX:0,sensorOffsetY:0},n.prototype.getOptions=function(e){return e=t.extend({},n.DEFAULTS,this.$.data(),e)},n.prototype.callEvent=function(e,o){return t.zui.callEvent(this.options[e],o,this)},n.prototype.init=function(){this.handleMouseEvents()},n.prototype.handleMouseEvents=function(){var n=this.$,i=this,s=this.options,r="before";this.$triggerTarget=s.trigger?(t.isFunction(s.trigger)?s.trigger(n):n.find(s.trigger)).first():n,this.$triggerTarget.on("mousedown",function(a){function l(e){var r={left:e.pageX,top:e.pageY};if(!(o.abs(r.left-E.left)<s.deviation&&o.abs(r.top-E.top)<s.deviation)){if(null===g){var a=c.css("position");"absolute"!=a&&"relative"!=a&&"fixed"!=a&&(p=a,c.css("position","relative")),g=n.clone().removeClass("drag-from").addClass("drag-shadow").css({position:"absolute",width:n.outerWidth(),transition:"none"}).appendTo(c),n.addClass("dragging"),i.callEvent("start",{event:e,element:n})}var l={left:r.left-w.left,top:r.top-w.top},f={left:l.left-y.left,top:l.top-y.top};g.css(f),C.left=r.left,C.top=r.top;var u=!1;h=!1,s.flex||d.removeClass("drop-to");var b=null;if(d.each(function(){var e=t(this),o=e.offset(),n=e.outerWidth(),i=e.outerHeight(),a=o.left+s.sensorOffsetX,l=o.top+s.sensorOffsetY;return r.left>a&&r.top>l&&r.left<a+n&&r.top<l+i&&(b&&b.removeClass("drop-to"),b=e,!s.nested)?!1:void 0}),b){h=!0;var O=b.data("id");n.data("id")!=O&&(m=!1),(null===v||v.data("id")!==O&&!m)&&(u=!0),v=b,s.flex&&d.removeClass("drop-to"),v.addClass("drop-to")}s.flex?null!==v&&v.length&&(h=!0):(n.toggleClass("drop-in",h),g.toggleClass("drop-in",h)),i.callEvent("drag",{event:e,isIn:h,target:v,element:n,isNew:u,selfTarget:m,clickOffset:w,offset:l,position:{left:l.left-y.left,top:l.top-y.top},mouseOffset:r}),e.preventDefault()}}function f(o){if(p&&c.css("position",p),null===g)return n.removeClass("drag-from"),t(e).unbind("mousemove",l).unbind("mouseup",f),void i.callEvent("always",{event:o,cancel:!0});h||(v=null);var s=!0,r={left:o.pageX,top:o.pageY},a={left:r.left-w.left,top:r.top-w.top},u={left:r.left-C.left,top:r.top-C.top};C.left=r.left,C.top=r.top;var b={event:o,isIn:h,target:v,element:n,isNew:!m&&null!==v,selfTarget:m,offset:a,mouseOffset:r,position:{left:a.left-y.left,top:a.top-y.top},lastMouseOffset:C,moveOffset:u};s=i.callEvent("beforeDrop",b),s&&h&&i.callEvent("drop",b),t(e).unbind("mousemove",l).unbind("mouseup",f),d.removeClass("drop-to"),n.removeClass("dragging").removeClass("drag-from"),g.remove(),i.callEvent("finish",b),i.callEvent("always",b),o.preventDefault()}if(s.hasOwnProperty(r)&&t.isFunction(s[r])){var u=s[r]({event:a,element:n});if(void 0!==u&&!u)return}var p,d=t.isFunction(s.target)?s.target(n):t(s.target),v=null,g=null,c=t(s.container).first(),h=!1,m=!0,b=n.offset(),E={left:a.pageX,top:a.pageY},y=c.offset(),w={left:E.left-b.left,top:E.top-b.top},C={left:E.left,top:E.top};n.addClass("drag-from"),t(e).bind("mousemove",l).bind("mouseup",f),a.preventDefault()})},n.prototype.reset=function(){this.$triggerTarget.off("mousedown"),this.handleMouseEvents()},t.fn.droppable=function(e){return this.each(function(){var o=t(this),i=o.data("zui.droppable"),s="object"==typeof e&&e;i||o.data("zui.droppable",i=new n(this,s)),"string"==typeof e&&i[e]()})},t.fn.droppable.Constructor=n}(jQuery,document,Math);
\ No newline at end of file

zui.json

@@ -1246,11 +1246,17 @@
       "filename": "hotkey",
       "includes": ["hotkey"]
     },
-    "prettify": {
-      "title": "prettify",
-      "dest": "dist/lib/prettify/",
-      "filename": "prettify",
-      "includes": ["prettify"]
+    "hotkey": {
+      "title": "hotkey",
+      "dest": "dist/lib/hotkey/",
+      "filename": "hotkey",
+      "includes": ["hotkey"]
+    },
+    "droppable": {
+      "title": "droppable",
+      "dest": "dist/lib/droppable/",
+      "filename": "droppable",
+      "includes": ["droppable"]
     },
     "migrate1.2": {
       "title": "migrate1.2",
@@ -1260,7 +1266,7 @@
     },
     "separate": {
       "title": "separate",
-      "bundles": ["jquery", "calendar", "kindeditor", "datetimepicker", "chosen", "chosenicons", "imgcutter", "datatable", "ieonly", "chart", "array", "hotkey", "board", "migrate1.2", "clipboard", "prettify"]
+      "bundles": ["jquery", "calendar", "kindeditor", "datetimepicker", "chosen", "chosenicons", "imgcutter", "datatable", "ieonly", "chart", "array", "hotkey", "board", "migrate1.2", "clipboard", "prettify", "droppable"]
     },
     "dist": {
       "title": "dist",