uikit-sass-rails 1.3.0 → 1.4.0

data/vendor/assets/javascripts/uikit/components/sortable.js

@@ -1,4 +1,4 @@
-/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /*
   * Based on nativesortable - Copyright (c) Brian Grinstead - https://github.com/bgrins/nativesortable
   */
@@ -6,30 +6,36 @@
 
     var component;
 
-    if (jQuery && jQuery.UIkit) {
-        component = addon(jQuery, jQuery.UIkit);
+    if (window.UIkit) {
+        component = addon(UIkit);
     }
 
     if (typeof define == "function" && define.amd) {
         define("uikit-sortable", ["uikit"], function(){
-            return component || addon(jQuery, jQuery.UIkit);
+            return component || addon(UIkit);
         });
     }
 
-})(function($, UI){
+})(function(UI){
 
     "use strict";
 
     var supportsTouch       = ('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch),
-        supportsDragAndDrop = !supportsTouch && (function() {
-        var div = document.createElement('div');
-        return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
-    })(),
+        draggingPlaceholder, currentlyDraggingElement, currentlyDraggingTarget, dragging, moving, clickedlink, delayIdle, touchedlists;
 
-    draggingPlaceholder, moving, dragging, clickedlink, delayIdle;
+    function closestSortable(ele) {
 
-    // disable native dragndrop support for now
-    supportsDragAndDrop = false;
+        ele = UI.$(ele);
+
+        do {
+            if (ele.data('sortable')) {
+                return ele;
+            }
+            ele = UI.$(ele).parent();
+        } while(ele.length);
+
+        return ele;
+    }
 
     UI.component('sortable', {
 
@@ -44,112 +50,132 @@
             overClass        : 'uk-sortable-over',
             draggingClass    : 'uk-sortable-dragged',
             dragMovingClass  : 'uk-sortable-moving',
+            baseClass        : 'uk-sortable',
             dragCustomClass  : '',
             handleClass      : false,
+            group            : false,
 
             stop             : function() {},
             start            : function() {},
             change           : function() {}
         },
 
-        init: function() {
+        boot: function() {
 
-            var $this                    = this,
-                element                  = this.element[0],
-                currentlyDraggingElement = null,
-                currentlyDraggingTarget  = null,
-                children;
+            // auto init
+            UI.ready(function(context) {
 
-            if (supportsDragAndDrop) {
-                this.element.children().attr("draggable", "true");
+                UI.$("[data-uk-sortable]", context).each(function(){
 
-            } else {
+                    var ele = UI.$(this);
 
-                // prevent leaving page after link clicking
-                // prevent leaving page after link clicking
-                this.element.on('mousedown touchstart', 'a[href]', function(e) {
-                    // don't break browser shortcuts for click+open in new tab
-                    if(!e.ctrlKey && !e.metaKey && !e.shiftKey) {
-                        clickedlink = $(this);
-                    }
-                }).on('click', 'a[href]', function(e) {
-                    if(!e.ctrlKey && !e.metaKey && !e.shiftKey) {
-                        clickedlink = $(this);
-                        e.stopImmediatePropagation();
-                        return false;
+                    if(!ele.data("sortable")) {
+                        var plugin = UI.sortable(ele, UI.Utils.options(ele.attr("data-uk-sortable")));
                     }
                 });
-            }
+            });
 
-            var handleDragStart = delegate(function(e) {
+            UI.$html.on('mousemove touchmove', function(e) {
 
-                moving = false;
-                dragging = false;
+                if (delayIdle) {
 
-                var target = $(e.target), children = $this.element.children();
+                    var src = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0] : e;
 
-                if (!supportsTouch && e.button==2) {
-                    return;
+                    if (Math.abs(src.pageX - delayIdle.pos.x) > delayIdle.threshold || Math.abs(src.pageY - delayIdle.pos.y) > delayIdle.threshold) {
+                        delayIdle.apply();
+                    }
                 }
 
-                if ($this.options.handleClass) {
+                if (draggingPlaceholder) {
+
+                    if (!moving) {
+                        moving = true;
+                        draggingPlaceholder.show();
 
-                    var handle = target.hasClass($this.options.handleClass) ? target : target.closest('.'+$this.options.handleClass, element);
+                        draggingPlaceholder.$current.addClass(draggingPlaceholder.$sortable.options.placeholderClass);
+                        draggingPlaceholder.$sortable.element.children().addClass(draggingPlaceholder.$sortable.options.childClass);
 
-                    if (!handle.length) {
-                        //e.preventDefault();
-                        return;
+                        UI.$html.addClass(draggingPlaceholder.$sortable.options.dragMovingClass);
+                    }
+
+                    var offset = draggingPlaceholder.data('mouse-offset'),
+                    left   = parseInt(e.originalEvent.pageX, 10) + offset.left,
+                    top    = parseInt(e.originalEvent.pageY, 10) + offset.top;
+
+                    draggingPlaceholder.css({'left': left, 'top': top });
+
+                    // adjust document scrolling
+                    if (top < UI.$win.scrollTop()) {
+                        UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingPlaceholder.height()/2));
+                    } else if ( (top + draggingPlaceholder.height()) > (window.innerHeight + UI.$win.scrollTop()) ) {
+                        UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingPlaceholder.height()/2));
                     }
                 }
+            });
+
+            UI.$html.on('mouseup touchend', function(e) {
 
-                if (e.dataTransfer) {
-                    e.dataTransfer.effectAllowed = 'move';
-                    e.dataTransfer.dropEffect = 'move';
-                    e.dataTransfer.setData('Text', "*"); // Need to set to something or else drag doesn't start
+                if(!moving && clickedlink) {
+                    location.href = clickedlink.attr('href');
                 }
 
-                currentlyDraggingElement = this;
+                delayIdle = clickedlink = false;
 
-                // init drag placeholder
-                if (draggingPlaceholder) draggingPlaceholder.remove();
+                // dragging?
+                if (!currentlyDraggingElement || !draggingPlaceholder) {
+                    // completely reset dragging attempt. will cause weird delay behavior elsewise
+                    currentlyDraggingElement = draggingPlaceholder = null;
+                    return;
+                }
 
-                var $current = $(currentlyDraggingElement), offset = $current.offset();
+                // inside or outside of sortable?
+                var sortable  = closestSortable(e.target),
+                    component = draggingPlaceholder.$sortable,
+                    ev        = { type: e.type };
 
-                delayIdle = {
+                if (sortable[0]) {
+                    component.dragDrop(ev, component.element);
+                }
+                component.dragEnd(ev, component.element);
+            });
+        },
 
-                    pos       : { x:e.pageX, y:e.pageY },
-                    threshold : $this.options.threshold,
-                    'apply'   : function() {
+        init: function() {
 
-                        draggingPlaceholder = $('<div class="'+([$this.options.draggingClass, $this.options.dragCustomClass].join(' '))+'"></div>').css({
-                            display : 'none',
-                            top     : offset.top,
-                            left    : offset.left,
-                            width   : $current.width(),
-                            height  : $current.height(),
-                            padding : $current.css('padding')
-                        }).data('mouse-offset', {
-                            'left': offset.left - parseInt(e.pageX, 10),
-                            'top' : offset.top  - parseInt(e.pageY, 10)
-                        }).append($current.html()).appendTo('body');
+            var $this   = this,
+                element = this.element[0],
+                children;
 
-                        draggingPlaceholder.$current  = $current;
-                        draggingPlaceholder.$sortable = $this;
+            touchedlists = [];
 
-                        addFakeDragHandlers();
+            // make sure :empty selector works on empty lists
+            if (this.element.children().length === 0) {
+                this.element.html('');
+            }
 
-                        $this.options.start(this, currentlyDraggingElement);
-                        $this.trigger('uk.sortable.start', [$this, currentlyDraggingElement]);
+            this.element.data('sortable-group', this.options.group );
 
-                        delayIdle = false;
-                    }
+            // prevent leaving page after link clicking
+            this.element.on('mousedown touchstart', 'a[href]', function(e) {
+                // don't break browser shortcuts for click+open in new tab
+                if(!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                    clickedlink = UI.$(this);
+                    e.preventDefault();
                 }
 
-                if (!supportsDragAndDrop) {
-                    e.preventDefault();
+            }).on('click', 'a[href]', function(e) {
+                if(!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                    clickedlink = UI.$(this);
+                    e.stopImmediatePropagation();
+                    return false;
                 }
             });
 
+
+            var handleDragStart = delegate(function(e) {
+                return $this.dragStart(e, this);
+            });
+
             var handleDragOver = delegate(function(e) {
 
                 if (!currentlyDraggingElement) {
@@ -163,27 +189,8 @@
                 return false;
             });
 
-            var handleDragEnter = delegate($.UIkit.Utils.debounce(function(e) {
-
-                if (!currentlyDraggingElement || currentlyDraggingElement === this) {
-                    return true;
-                }
-
-                // Prevent dragenter on a child from allowing a dragleave on the container
-                var previousCounter = $this.dragenterData(this);
-
-                $this.dragenterData(this, previousCounter + 1);
-
-                if (previousCounter === 0) {
-
-                    $(this).addClass($this.options.overClass);
-
-                    if (!$this.options.warp) {
-                        $this.moveElementNextTo(currentlyDraggingElement, this);
-                    }
-                }
-
-                return false;
+            var handleDragEnter = delegate(UI.Utils.debounce(function(e) {
+                return $this.dragEnter(e, this);
             }), 40);
 
             var handleDragLeave = delegate(function(e) {
@@ -194,65 +201,11 @@
 
                 // This is a fix for child elements firing dragenter before the parent fires dragleave
                 if (!$this.dragenterData(this)) {
-                    $(this).removeClass($this.options.overClass);
+                    UI.$(this).removeClass($this.options.overClass);
                     $this.dragenterData(this, false);
                 }
             });
 
-            var handleDrop = delegate(function(e) {
-
-
-                if (e.type === 'drop') {
-
-                    if (e.stopPropagation) {
-                        e.stopPropagation();
-                    }
-
-                    if (e.preventDefault) {
-                        e.preventDefault();
-                    }
-                }
-
-                if (!dragging && !$this.options.warp) {
-                    return;
-                }
-
-                if ($this.options.warp) {
-
-                    var thisSibling = currentlyDraggingElement.nextSibling;
-                    this.parentNode.insertBefore(currentlyDraggingElement, this);
-                    this.parentNode.insertBefore(this, thisSibling);
-
-                    UI.Utils.checkDisplay($this.element.parent());
-                }
-
-                $this.options.change(this, currentlyDraggingElement);
-                $this.trigger('uk.sortable.change', [$this, currentlyDraggingElement]);
-            });
-
-            var handleDragEnd = function(e) {
-
-                currentlyDraggingElement = null;
-                currentlyDraggingTarget  = null;
-
-                $this.element.children().each(function() {
-                    if (this.nodeType === 1) {
-                        $(this).removeClass($this.options.overClass).removeClass($this.options.placeholderClass).removeClass($this.options.childClass);
-                        $this.dragenterData(this, false);
-                    }
-                });
-
-                $('html').removeClass($this.options.dragMovingClass);
-
-                removeFakeDragHandlers();
-
-                $this.options.stop(this);
-                $this.trigger('uk.sortable.stop', [$this]);
-
-                draggingPlaceholder.remove();
-                draggingPlaceholder = null;
-            };
-
             var handleTouchMove = delegate(function(e) {
 
                 if (!currentlyDraggingElement ||
@@ -267,29 +220,69 @@
                 if (!$this.options.warp) {
                     $this.moveElementNextTo(currentlyDraggingElement, this);
                 } else {
-                    $(this).addClass($this.options.overClass);
+                    UI.$(this).addClass($this.options.overClass);
                 }
 
                 return prevent(e);
             });
 
+            // Bind/unbind standard mouse/touch events as a polyfill.
+            function addDragHandlers() {
+                if (supportsTouch) {
+                    element.addEventListener("touchmove", handleTouchMove, false);
+                } else {
+                    element.addEventListener('mouseover', handleDragEnter, false);
+                    element.addEventListener('mouseout', handleDragLeave, false);
+                }
+
+                // document.addEventListener("selectstart", prevent, false);
+            }
+
+            function removeDragHandlers() {
+                if (supportsTouch) {
+                    element.removeEventListener("touchmove", handleTouchMove, false);
+                } else {
+                    element.removeEventListener('mouseover', handleDragEnter, false);
+                    element.removeEventListener('mouseout', handleDragLeave, false);
+                }
+
+                // document.removeEventListener("selectstart", prevent, false);
+            }
+
+            this.addDragHandlers    = addDragHandlers;
+            this.removeDragHandlers = removeDragHandlers;
+
+            function handleDragMove(e) {
+
+                if (!currentlyDraggingElement) {
+                    return;
+                }
+
+                $this.dragMove(e, $this);
+            }
+
             function delegate(fn) {
+
                 return function(e) {
 
-                    var touch  = (supportsTouch && e.touches && e.touches[0]) || { },
+                    var touch, target, context;
+
+                    if (e) {
+                        touch  = (supportsTouch && e.touches && e.touches[0]) || { };
                         target = touch.target || e.target;
 
-                    // Fix event.target for a touch event
-                    if (supportsTouch && document.elementFromPoint) {
-                        target = document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - document.body.scrollTop);
+                        // Fix event.target for a touch event
+                        if (supportsTouch && document.elementFromPoint) {
+                            target = document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - document.body.scrollTop);
+                        }
                     }
 
-                    if ($(target).hasClass($this.options.childClass)) {
+                    if (UI.$(target).hasClass($this.options.childClass)) {
                         fn.apply(target, [e]);
                     } else if (target !== element) {
 
                         // If a child is initiating the event or ending it, then use the container as context for the callback.
-                        var context = moveUpToChildNode(element, target);
+                        context = moveUpToChildNode(element, target);
 
                         if (context) {
                             fn.apply(context, [e]);
@@ -298,62 +291,239 @@
                 };
             }
 
-            // Opera and mobile devices do not support drag and drop.  http://caniuse.com/dragndrop
-            // Bind/unbind standard mouse/touch events as a polyfill.
-            function addFakeDragHandlers() {
-                if (!supportsDragAndDrop) {
-                    if (supportsTouch) {
-                        element.addEventListener("touchmove", handleTouchMove, false);
-                    } else {
-                        element.addEventListener('mouseover', handleDragEnter, false);
-                        element.addEventListener('mouseout', handleDragLeave, false);
-                    }
+            window.addEventListener(supportsTouch ? 'touchmove' : 'mousemove', handleDragMove, false);
+            element.addEventListener(supportsTouch ? 'touchstart': 'mousedown', handleDragStart, false);
+        },
+
+        dragStart: function(e, elem) {
+
+            moving = false;
+            dragging = false;
+
+            var $this = this,
+                target = UI.$(e.target),
+                children = $this.element.children();
+
+            if (!supportsTouch && e.button==2) {
+                return;
+            }
+
+            if ($this.options.handleClass) {
 
-                    element.addEventListener(supportsTouch ? 'touchend' : 'mouseup', handleDrop, false);
-                    document.addEventListener(supportsTouch ? 'touchend' : 'mouseup', handleDragEnd, false);
-                    document.addEventListener("selectstart", prevent, false);
+                var handle = target.hasClass($this.options.handleClass) ? target : target.closest('.'+$this.options.handleClass, element);
 
+                if (!handle.length) {
+                    //e.preventDefault();
+                    return;
+                }
+            }
+
+            // prevent dragging if taget is a form field
+            if (target.is(':input')) {
+                return;
+            }
+
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.dropEffect = 'move';
+                e.dataTransfer.setData('Text', "*"); // Need to set to something or else drag doesn't start
+            }
+
+            currentlyDraggingElement = elem;
+
+            // init drag placeholder
+            if (draggingPlaceholder) draggingPlaceholder.remove();
+
+            var $current = UI.$(currentlyDraggingElement), offset = $current.offset();
+
+            delayIdle = {
+
+                pos       : { x:e.pageX, y:e.pageY },
+                threshold : $this.options.threshold,
+                'apply'   : function() {
+
+                    draggingPlaceholder = UI.$('<div class="'+([$this.options.draggingClass, $this.options.dragCustomClass].join(' '))+'"></div>').css({
+                        display : 'none',
+                        top     : offset.top,
+                        left    : offset.left,
+                        width   : $current.width(),
+                        height  : $current.height(),
+                        padding : $current.css('padding')
+                    }).data({
+                        'mouse-offset': {
+                            'left'   : offset.left - parseInt(e.pageX, 10),
+                            'top'    : offset.top  - parseInt(e.pageY, 10)
+                        },
+                        'origin' : $this.element,
+                        'index'  : $current.index()
+                    }).append($current.html()).appendTo('body');
+
+                    draggingPlaceholder.$current  = $current;
+                    draggingPlaceholder.$sortable = $this;
+                    $current.data('sortable-group', $this.options.group);
+
+                    $this.addDragHandlers();
+
+                    $this.options.start(this, currentlyDraggingElement);
+                    $this.trigger('start.uk.sortable', [$this, currentlyDraggingElement]);
+
+                    delayIdle = false;
+                }
+            };
+
+            e.preventDefault();
+        },
+
+        dragMove: function(e, elem) {
+            var overEl       = UI.$(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop))),
+                overRoot     = overEl.closest('.'+this.options.baseClass),
+                groupOver    = overRoot.data("sortable-group"),
+                $current     = UI.$(currentlyDraggingElement),
+                currentRoot  = $current.parent(),
+                groupCurrent = $current.data("sortable-group"),
+                overChild;
+
+            if (overRoot[0] !== currentRoot[0] && groupCurrent !== undefined && groupOver === groupCurrent) {
+                overRoot.data('sortable').addDragHandlers();
+
+                touchedlists.push(overRoot);
+                overRoot.children().addClass(this.options.childClass);
+
+                // swap root
+                if (overRoot.children().length > 0) {
+                    overChild = overEl.closest('.'+this.options.childClass);
+                    overChild.before($current);
+                } else { // empty list
+                    overEl.append($current);
+                }
+
+                // list empty? remove inner whitespace to make sure :empty selector works
+                if (currentRoot.children().length === 0) {
+                    currentRoot.html('');
+                }
+
+                UIkit.$doc.trigger('mouseover');
+            }
+        },
+
+        dragEnter: function(e, elem) {
+
+            if (!currentlyDraggingElement || currentlyDraggingElement === elem) {
+                return true;
+            }
+
+            // Prevent dragenter on a child from allowing a dragleave on the container
+            var previousCounter = this.dragenterData(elem);
+
+            this.dragenterData(elem, previousCounter + 1);
+
+            if (previousCounter === 0) {
+
+                UI.$(elem).addClass(this.options.overClass);
+
+                if (!this.options.warp) {
+                    this.moveElementNextTo(currentlyDraggingElement, elem);
                 }
             }
 
-            function removeFakeDragHandlers() {
-                if (!supportsDragAndDrop) {
-                    if (supportsTouch) {
-                        element.removeEventListener("touchmove", handleTouchMove, false);
-                    } else {
-                        element.removeEventListener('mouseover', handleDragEnter, false);
-                        element.removeEventListener('mouseout', handleDragLeave, false);
+            return false;
+        },
+
+        dragEnd: function(e, elem) {
+
+            var $this = this;
+
+            // avoid triggering event twice
+            if (currentlyDraggingElement) {
+                // TODO: trigger on right element?
+                this.options.stop(elem);
+                this.trigger('stop.uk.sortable', [this]);
+            }
+
+            currentlyDraggingElement = null;
+            currentlyDraggingTarget  = null;
+
+            touchedlists.push(this.element);
+            touchedlists.forEach(function(el, i) {
+                UI.$(el).children().each(function() {
+                    if (this.nodeType === 1) {
+                        UI.$(this).removeClass($this.options.overClass)
+                            .removeClass($this.options.placeholderClass)
+                            .removeClass($this.options.childClass);
+                        $this.dragenterData(this, false);
                     }
+                });
+            });
+
+            touchedlists = [];
+
+            UI.$html.removeClass(this.options.dragMovingClass);
+
+            this.removeDragHandlers();
+
+            if (draggingPlaceholder) {
+                draggingPlaceholder.remove();
+                draggingPlaceholder = null;
+            }
+        },
+
+        dragDrop: function(e, elem) {
+
+            if (e.type === 'drop') {
+
+                if (e.stopPropagation) {
+                    e.stopPropagation();
+                }
 
-                    element.removeEventListener(supportsTouch ? 'touchend' : 'mouseup', handleDrop, false);
-                    document.removeEventListener(supportsTouch ? 'touchend' : 'mouseup', handleDragEnd, false);
-                    document.removeEventListener("selectstart", prevent, false);
+                if (e.preventDefault) {
+                    e.preventDefault();
                 }
             }
 
-            if (supportsDragAndDrop) {
-                element.addEventListener('dragstart', handleDragStart, false);
-                element.addEventListener('dragenter', handleDragEnter, false);
-                element.addEventListener('dragleave', handleDragLeave, false);
-                element.addEventListener('drop', handleDrop, false);
-                element.addEventListener('dragover', handleDragOver, false);
-                element.addEventListener('dragend', handleDragEnd, false);
-            } else {
+            if (this.options.warp) {
+
+                var thisSibling = currentlyDraggingElement.nextSibling;
+                elem.parentNode.insertBefore(currentlyDraggingElement, elem);
+                elem.parentNode.insertBefore(elem, thisSibling);
+
+                UI.Utils.checkDisplay(this.element.parent());
+            }
+
+            this.triggerChangeEvents();
+        },
+
+        triggerChangeEvents: function() {
+
+            // trigger events once
+            if (!currentlyDraggingElement) return;
+
+            var $current = UI.$(currentlyDraggingElement),
+                oldRoot  = draggingPlaceholder.data("origin"),
+                newRoot  = $current.closest('.'+this.options.baseClass),
+                triggers = [];
 
-                element.addEventListener(supportsTouch ? 'touchstart':'mousedown', handleDragStart, false);
+            // events depending on move inside lists or across lists
+            if (oldRoot[0] === newRoot[0] && draggingPlaceholder.data('index') != $current.index() ) {
+                triggers.push({el: this, mode: 'moved'});
+            } else if (oldRoot[0] != newRoot[0]) {
+                triggers.push({el: newRoot, mode: 'added'}, {el: oldRoot, mode: 'removed'});
             }
+
+            triggers.forEach(function (trigger, i) {
+                trigger.el.trigger('change.uk.sortable', [trigger.el, currentlyDraggingElement, trigger.mode]);
+            });
         },
 
         dragenterData: function(element, val) {
 
-            element = $(element);
+            element = UI.$(element);
 
             if (arguments.length == 1) {
-                return parseInt(element.attr('data-child-dragenter'), 10) || 0;
+                return parseInt(element.data('child-dragenter'), 10) || 0;
             } else if (!val) {
-                element.removeAttr('data-child-dragenter');
+                element.removeData('child-dragenter');
             } else {
-                element.attr('data-child-dragenter', Math.max(0, val));
+                element.data('child-dragenter', Math.max(0, val));
             }
         },
 
@@ -362,7 +532,7 @@
             dragging = true;
 
             var $this    = this,
-                list     = $(element).parent().css('min-height', ''),
+                list     = UI.$(element).parent().css('min-height', ''),
                 next     = isBelow(element, elementToMoveNextTo) ? elementToMoveNextTo : elementToMoveNextTo.nextSibling,
                 children = list.children(),
                 count    = children.length;
@@ -376,7 +546,7 @@
             list.css('min-height', list.height());
 
             children.stop().each(function(){
-                var ele = $(this),
+                var ele = UI.$(this),
                     offset = ele.position();
 
                     offset.width = ele.width();
@@ -389,17 +559,17 @@
             UI.Utils.checkDisplay($this.element.parent());
 
             children = list.children().each(function() {
-                var ele    = $(this);
+                var ele    = UI.$(this);
                 ele.data('offset-after', ele.position());
             }).each(function() {
-                var ele    = $(this),
+                var ele    = UI.$(this),
                     before = ele.data('offset-before');
                 ele.css({'position':'absolute', 'top':before.top, 'left':before.left, 'min-width':before.width });
             });
 
             children.each(function(){
 
-                var ele    = $(this),
+                var ele    = UI.$(this),
                     before = ele.data('offset-before'),
                     offset = ele.data('offset-after');
 
@@ -407,8 +577,8 @@
 
                     setTimeout(function(){
                         ele.animate({'top':offset.top, 'left':offset.left}, $this.options.animation, function() {
-                            ele.css({'position':'','top':'', 'left':'', 'min-width': '', 'pointer-events':''}).removeClass($this.options.overClass).attr('data-child-dragenter', '');
-                            count--
+                            ele.css({'position':'','top':'', 'left':'', 'min-width': '', 'pointer-events':''}).removeClass($this.options.overClass).removeData('child-dragenter');
+                            count--;
                             if (!count) {
                                 list.css('min-height', '');
                                 UI.Utils.checkDisplay($this.element.parent());
@@ -416,6 +586,24 @@
                         });
                     }, 0);
             });
+        },
+
+        serialize: function() {
+
+            var data = [], item, attribute;
+
+            this.element.children().each(function(j, child) {
+                item = {};
+                for (var i = 0; i < child.attributes.length; i++) {
+                    attribute = child.attributes[i];
+                    if (attribute.name.indexOf('data-') === 0) {
+                        item[attribute.name.substr(5)] = UI.Utils.str2json(attribute.value);
+                    }
+                }
+                data.push(item);
+            });
+
+            return data;
         }
     });
 
@@ -468,64 +656,5 @@
         e.returnValue = false;
     }
 
-    // auto init
-    UI.ready(function(context) {
-
-        $("[data-uk-sortable]", context).each(function(){
-
-          var ele = $(this);
-
-          if(!ele.data("sortable")) {
-              var plugin = UI.sortable(ele, UI.Utils.options(ele.attr("data-uk-sortable")));
-          }
-        });
-    });
-
-    $('html').on('mousemove touchmove', function(e) {
-
-        if (delayIdle) {
-
-            var src = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0] : e;
-
-            if (Math.abs(src.pageX - delayIdle.pos.x) > delayIdle.threshold || Math.abs(src.pageY - delayIdle.pos.y) > delayIdle.threshold) {
-                delayIdle.apply();
-            }
-        }
-
-        if (draggingPlaceholder) {
-
-            if (!moving) {
-                moving = true;
-                draggingPlaceholder.show();
-
-                draggingPlaceholder.$current.addClass(draggingPlaceholder.$sortable.options.placeholderClass);
-                draggingPlaceholder.$sortable.element.children().addClass(draggingPlaceholder.$sortable.options.childClass);
-
-                $('html').addClass(draggingPlaceholder.$sortable.options.dragMovingClass);
-            }
-
-            var offset = draggingPlaceholder.data('mouse-offset'),
-                left   = parseInt(e.originalEvent.pageX, 10) + offset.left,
-                top    = parseInt(e.originalEvent.pageY, 10) + offset.top;
-
-            draggingPlaceholder.css({'left': left, 'top': top });
-
-            if (top < UI.$win.scrollTop()) {
-                UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingPlaceholder.height()/2));
-            } else if ( (top + draggingPlaceholder.height()) > (window.innerHeight + UI.$win.scrollTop()) ) {
-                UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingPlaceholder.height()/2));
-            }
-        }
-    });
-
-    UI.$html.on('mouseup touchend', function() {
-
-        if(!moving && clickedlink) {
-            location.href = clickedlink.attr('href');
-        }
-
-        delayIdle = clickedlink = false;
-    });
-
     return UI.sortable;
-});
+});