代码比较冗余，还没来得及做整理，往见谅。

主要用到的 JS 事件有：

　　onmousedown：鼠标点下事件

　　onmousemove：鼠标移动事件

　　onmouseup：鼠标放开事件

具体代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列拖动</title>

    <style type="text/css">

        body,ul,li {padding: 0; margin: 0;}

        ul, li {list-style: none;}

        .left {width: 300px; float: left;margin: 3px;}

        .right {width: 300px; float: left; margin:3px;}

        .column {width: 200px;height: 30px; line-height: 30px; background-color: #AACCFF; margin: 8px 5px; text-align: center; cursor: pointer;}

        .columnOld {width: 200px; height: 30px; line-height: 30px; background-color: #CCC; margin: 8px 5px; text-align: center;}

        .target {border: 1px solid #CCC; background-color: #FFF5EE;box-shadow: 0 0 8px #CCC; -moz-box-shadow: 0 0 8px #CCC; -webkit-box-shadow: 0 0 8px #CCC;}

        .container {width: 600px; height: 200px; display: block;}

    </style>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    window.onload = function(){

        var Lis = document.getElementsByClassName("column");

        var container = document.getElementsByClassName("container")[0];

        for (var i = Lis.length - 1; i >= 0; i--) {

            var obj = Lis[i];

            var source = obj.parentNode;

            var target = document.getElementById("container");

            moveColumn(obj, target, source);

        }

    }

    /**

         * 字段拖拽事件

     */

    function moveColumn(obj, target, source) {

        // 1. 获取事件

        obj.onmousedown = function(event) {

            var ev = event || window.event;

            // 2. 复制新节点，设置透明度和innerHTML，class

            var newObj = document.createElement("li");

            newObj.className = 'column';

            newObj.style.opacity = '0.5';

            newObj.style.filter = 'alpha(opacity:50)';

            newObj.innerHTML = obj.innerHTML;

            newObj.style.margin = '0';

            newObj.style.position = 'absolute';

            newObj.style.zIndex = '5';

            newObj.source = source;

            // 3. 计算点击点在 obj 上的位置

            var disH = ev.clientY - obj.offsetTop;

            var disL = ev.clientX - obj.offsetLeft;

            // 4. 设置绝对定位的top和left

            newObj.style.top = obj.offsetTop + 'px';

            newObj.style.left = obj.offsetLeft + 'px';

            // 5. 添加节点

            obj.parentNode.appendChild(newObj);

            // 6. 鼠标移动事件

            document.onmousemove = function(e) {

                // 1. 获取事件

                var e = e || window.event;

                // 2. 获取鼠标位置，设置newObj的定位

                var L = e.clientX - disL;

                var T = e.clientY - disH;

                newObj.style.top = T + 'px';

                newObj.style.left = L + 'px';

                // 3. source 背景色和边框变换

                $(target).addClass("target");

                obj.className = "columnOld";

            }

            // 7. 鼠标松开事件

            document.onmouseup = function() {

                $(target).removeClass("target");

                // target.class = '';

                var not = newObj.offsetTop;

                var nol = newObj.offsetLeft;

                var tot = target.offsetTop;

                var tol = target.offsetLeft;

                    if (not >= tot && nol >= tol && not <= tot + target.offsetHeight && nol <= tol + target.offsetWidth) {

                        newObj.removeAttribute('style');

                        newObj.className = "column";

                        newObj.style.float = "left";

                        target.appendChild(newObj);

                        backColumn(newObj, source, target);

                        var id = obj.id;

                        newObj.id = id;

                        obj.id = id + "_old";

                        obj.onmousedown = null;

                    } else {

                        obj.className = "column";

                        obj.parentNode.removeChild(newObj);

                    }

                    document.onmouseup = null;

                    document.onmousemove = null;

            }

        }

    }

    function backColumn(obj, target, source) {

        var Lis = source.getElementsByTagName('li');

        var lineNum = Math.floor(source.offsetWidth / 210);

        var liFirst = Lis[0].offsetTop;

        var liHeight = Lis[0].offsetHeight;

        var liWidth = Lis[0].offsetWidth;

        // 1. 获取事件

        obj.onmousedown = function(event) {

            var ev = event || window.event;

            // 2. 复制新节点，设置透明度和innerHTML，class

            var newObj = document.createElement("li");

            newObj.className = 'column';

            newObj.style.opacity = '0.5';

            newObj.style.filter = 'alpha(opacity:50)';

            newObj.innerHTML = obj.innerHTML;

            newObj.style.margin = '0';

            newObj.style.position = 'absolute';

            newObj.style.zIndex = '5';

            // 3. 计算点击点在 obj 上的位置

            var disH = ev.clientY - obj.offsetTop;

            var disL = ev.clientX - obj.offsetLeft;

            // 4. 设置绝对定位的top和left

            newObj.style.top = obj.offsetTop + 'px';

            newObj.style.left = obj.offsetLeft + 'px';

            // 5. 添加节点

            obj.parentNode.appendChild(newObj);

            // 6. 添加空白节点（占位）

            var blank = document.createElement("li");

            blank.className = 'column';

            blank.style.backgroundColor = '#63B8FF';

                blank.style.float = "left";

            // 6. 鼠标移动事件

            document.onmousemove = function(e) {

                // 1. 获取事件

                var e = e || window.event;

                // 2. 获取鼠标位置，设置newObj的定位

                var L = e.clientX - disL;

                var T = e.clientY - disH;

                newObj.style.top = T + 'px';

                newObj.style.left = L + 'px';

                // 3. source 背景色和边框变换

                $(target).addClass("target");

                obj.className = "columnOld";

                // 根据当前拖拽到的位置计算其重新排序后的位置

                var line = lineNum * Math.round((T - liFirst)/liHeight)

          var n = line + Math.floor(L / liWidth);

          // 将空白节点插入到该位置

          // if ()

          source.insertBefore(blank,source.children[n]);

            }

            // 7. 鼠标松开事件

            document.onmouseup = function() {

                $(target).removeClass("target");

                // target.class = '';

                var not = newObj.offsetTop;

                var nol = newObj.offsetLeft;

                var tot = target.offsetTop;

                var tol = target.offsetLeft;

                    if (not >= tot && nol >= tol && not <= tot + target.offsetHeight && nol <= tol + target.offsetWidth) {

                        var oldObj = document.getElementById(obj.id + '_old');

                        oldObj.className = 'column';

                        source.removeChild(newObj);

                        source.removeChild(obj);

                        oldObj.id = obj.id;

                        moveColumn(oldObj, source, target);

                        obj.onmousedown = null;

                    } else {

                        obj.className = "column";

                        obj.parentNode.removeChild(newObj);

                        // 将被拖拽的元素插入到空白节点的位置

                        if (blank.parentNode == source) {

                source.insertBefore(obj,blank);

                        }

            // 删除拖拽样式

            // obj.removeAttribute('style');

                    }

                    if (blank.parentNode == source) {

              // 删除空白节点

              source.removeChild(blank);

            }

                    document.onmouseup = null;

                    document.onmousemove = null;

            }

        }

    }

    function getStyle(obj, attr) {

            if (obj.currentStyle) {

                return obj.currentStyle[attr];

            } else {

                return getComputedStyle(obj, false)[attr];

            }

        }

    </script>

</head>

<body>

    <div style="overflow: hidden;">

    <ul class="left">

        <li class="column" id="c1">字段a-1</li>

        <li class="column" id="c2">字段a-2</li>

        <li class="column" id="c3">字段a-3</li>

        <li class="column" id="c4">字段a-4</li>

        <li class="column" id="c5">字段a-5</li>

    </ul>

    <ul class="right">

        <li class="column" id="c6">字段b-1</li>

        <li class="column" id="c7">字段b-2</li>

        <li class="column" id="c8">字段b-3</li>

        <li class="column" id="c9">字段b-4</li>

        <li class="column" id="c10">字段b-5</li>

    </ul>

    </div>

    <div class="container" id="container">

    </div>

</body>

</html>

原生js实现模块来回拖拽效果的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  3. vuejs2.0运用原生js实现简单的拖拽元素功能

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  8. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  9. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

随机推荐

  1. 调试CEF3程序的方法

    CEF3多进程模式调试时按F5只会启动调试Browser进程,要调试Renderer进程就要让进程在启动时就暂停并附加进程. 所幸google早就想到了这一点,chrome的命令行参数就可以办到, - ...

  2. VIJOS-P1066 弱弱的战壕

    JDOJ 1247: VIJOS-P1066 弱弱的战壕 题目传送门 Description 永恒和mx正在玩一个即时战略游戏,名字嘛~~~~~~恕本人记性不好,忘了--b. mx在他的基地附近建立了 ...

  3. POJ2536-Gopher II-（匈牙利算法）

    题意:n只老鼠,m个洞,s秒逃命,逃命速度为v,一个洞只能保住一只老鼠,最少多少只老鼠会被老鹰抓到. 题解:找出每只老鼠有哪些洞可以保命,建立二分图,算出最大匹配,不是求保住命的老鼠,而是求被抓住的老 ...

  4. 学习-guava

    Guava Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库 例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives sup ...

  5. Vue自动化注册全局组件脚本

    今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...

  6. [HNOI2015]亚瑟王（概率期望，DP）

    题目大意:很清晰了,不写了. $1\le T\le 444,1\le n\le 220,0\le r\le 132,0<p_i<1,0\le d_i\le 1000$. $p_i$ 和 $ ...

  7. 关于nlp的一些探索

    深度学习,知识图谱,nlp学习经历                          获取信息来源:英文paper研读,吴恩达公开课,Hiton公开课,北大nlp教材,英文最新学术论文,中科院院士技术 ...

  8. TCP四次挥手客户端关闭链接为什么要等待2倍MSL

    最长报文寿命 在TCP协议中,当发送方发送释放连接报文收到确认报文后,只是在一个方向上断开了TCP连接,然后,接收方发送释放连接的报文,发送方回复确认.此时,连接还没有释放,发送方要等待2MSL(ma ...

  9. 第10组 Beta冲刺（4/4）

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...

  10. R包的安装 卸载 加载 移除等

    R包的安装 1)使用 Rstudio 手动安装 Rstudio的窗口默认为四个,在右下角的窗口的 packages 下会显示所有安装的 R 包 点击 Install -> 输入R 包名 -> ...