摘要：基于的拖動排序插件代碼地址核心代碼由于有些瀏覽器的圖片和鏈接是默認可以拖動的，所以屏蔽掉的事件只允許鼠標左鍵拖動禁止在表單元素里面拖動滾動條的位置向上排序向下排序用法水平有限，歡迎提出寶貴意見一起交流學(xué)習(xí)

代碼地址：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 #ffffd"
            },
            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();

水平有限，歡迎提出寶貴意見一起交流學(xué)習(xí)