在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例JavaScript基础 → 表格行拖拽实例源码下载(原生js)

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

JavaScript基础

下载此实例
  • 开发语言:js
  • 实例大小:6.38KB
  • 下载次数:21
  • 浏览次数:202
  • 发布时间:2017-03-17
  • 实例类别:JavaScript基础
  • 发 布 人:chaowei9898
  • 文件格式:.html
  • 所需积分:0
 相关标签: 拖拽

实例介绍

【实例简介】

很简单的鼠标拖拽行

【实例截图】

拖拽前:

拖拽后:


【核心代码】


        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);

        }



标签: 拖拽

实例下载地址

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

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警