分享一個jQuery的拖動排序插件

基於jQuery的拖動排序插件

代碼地址：https://github.com/ylb1992/dr...
核心代碼：

(function($) {
    'use strict';
    $.fn.dragSort = function(options) {
        var settings = $.extend(true, {
            targetEle: 'li',
            replaceStyle: {
                'background-color': '#f9f9f9',
                'border': '1px dashed #ddd'
            },
            dragStyle: {
                'position': 'fixed',
                'box-shadow': '10px 10px 20px 0 #eee'
            }
        }, options);

        return this.each(function() {
            
            // 因爲有些瀏覽器的圖片和連接是默承認以拖動的，因此屏蔽掉document的dragstart事件 
            document.ondragstart = function() {
                return false;
            }

            var thisEle = $(this);
            thisEle.on('mousedown.dragSort', settings.targetEle, function(event) {

                var selfEle = $(this);

                // 只容許鼠標左鍵拖動
                if(event.which !== 1) {
                    return;
                }

                // 禁止在表單元素裏面拖動
                var tagName = event.target.tagName.toUpperCase();
                if(tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
                    return;
                }

                var moveEle = $(this);

                var offset = selfEle.offset();
                var rangeX = event.pageX - offset.left;
                var rangeY = event.pageY - offset.top;

                var replaceEle = selfEle.clone()
                    .css('height', selfEle.outerHeight())
                    .css(settings.replaceStyle)
                    .empty();
                settings.dragStyle.width = selfEle.width();
                var move = true;

                $(document).on('mousemove.dragSort', function(event) {
                    if (move) {
                        moveEle.before(replaceEle).css(settings.dragStyle).appendTo(moveEle.parent());
                        move = false;
                    }

                    var thisOuterHeight = moveEle.outerHeight();

                    // 滾動條的位置
                    var scrollTop = $(document).scrollTop();
                    var scrollLeft = $(document).scrollLeft();


                    var moveLeft = event.pageX - rangeX - scrollLeft;
                    var moveTop = event.pageY - rangeY - scrollTop;



                    var prevEle = replaceEle.prev();
                    var nextEle = replaceEle.next().not(moveEle);

                    moveEle.css({
                        left: moveLeft,
                        top: moveTop
                    });


                    // 向上排序
                    if (prevEle.length > 0 && moveTop + scrollTop < prevEle.offset().top + prevEle.outerHeight() / 2) { 
                        replaceEle.after(prevEle);
                    //向下排序
                    } else if (nextEle.length > 0 && moveTop + scrollTop > nextEle.offset().top - nextEle.outerHeight() / 2) { 
                        replaceEle.before(nextEle);
                    }
                });

                $(document).on('mouseup.dragSort', function(event) {
                    $(document).off('mousemove.dragSort mouseup.dragSort')
                    if (!move) {
                        replaceEle.before(moveEle.removeAttr('style')).remove();
                    }
                });
            });
        });
    };
})(jQuery)

用法：

$('#wrap').dragSort();

水平有限，歡迎提出寶貴意見一塊兒交流學習