分享一个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 #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();

水平有限，欢迎提出宝贵意见一起交流学习