表格行拖拽实例源码下载(原生js)

【实例简介】

很简单的鼠标拖拽行

【实例截图】

拖拽前：

拖拽后：

【核心代码】

        window.onload = function () {
            //绑定事件
            var addEvent = document.addEventListener ? function (el, type, callback) {
                el.addEventListener(type, callback, !1);
            } : function (el, type, callback) {
                el.attachEvent("on" type, callback);
            }
            //判定对样式的支持
            var getStyleName = (function () {
                var prefixes = ['', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-'];
                var reg_cap = /-([a-z])/g;
                function getStyleName(css, el) {
                    el = el || document.documentElement;
                    var style = el.style, test;
                    for (var i = 0, l = prefixes.length; i < l; i ) {
                        test = (prefixes[i] css).replace(reg_cap, function ($0, $1) {
                            return $1.toUpperCase();
                        });
                        if (test in style) {
                            return test;
                        }
                    }
                    return null;
                }
                return getStyleName;
            })();
            var userSelect = getStyleName("user-select");

            //精确获取样式
            var getStyle = document.defaultView ? function (el, style) {
                return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
            } : function (el, style) {
                style = style.replace(/\-(\w)/g, function ($, $1) {
                    return $1.toUpperCase();
                });
                return el.currentStyle[style];
            }
            var dragManager = {
                y: 0,

                dragStart: function (e) {
                    e = e || event;
                    var handler = e.target || e.srcElement;
                    if (handler.nodeName === "TD") {
                        handler = handler.parentNode;
                        dragManager.handler = handler;
                        if (!handler.getAttribute("data-background")) {
                            handler.setAttribute("data-background", getStyle(handler, "background-color"))
                        }
                        //显示为可移动的状态
                        handler.style.backgroundColor = "#ccc";
                        handler.style.cursor = "move";
                        dragManager.y = e.clientY;

                        if (typeof userSelect === "string") {
                            return document.documentElement.style[userSelect] = "none";
                        }
                        document.unselectable = "on";
                        document.onselectstart = function () {
                            return false;
                        }
                    }
                },
                draging: function (e) {//mousemove时拖动行
                    var handler = dragManager.handler;
                    if (handler) {
                        e = e || event;

                        var y = e.clientY;
                        var down = y > dragManager.y;//是否向下移动
                        var tr = document.elementFromPoint(e.clientX, e.clientY);
                        if (tr && tr.nodeName == "TD") {
                            tr = tr.parentNode
                            dragManager.y = y;
                            if (handler !== tr) {
                                tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr));
                            }
                        };
                    }
                },
                dragEnd: function () {
                    var handler = dragManager.handler
                    if (handler) {
                        handler.style.backgroundColor = handler.getAttribute("data-background");
                        handler.style.cursor = "default";
                        dragManager.handler = null;

                    }
                    if (typeof userSelect === "string") {
                        return document.documentElement.style[userSelect] = "text";
                    }
                    document.unselectable = "off";
                    document.onselectstart = null;
                },
                main: function (el) {
                    addEvent(el, "mousedown", dragManager.dragStart);
                    addEvent(document, "mousemove", dragManager.draging);
                    addEvent(document, "mouseup", dragManager.dragEnd);

                }
            }
            var el = document.getElementById("table");
            dragManager.main(el);

        }