关于常见的左右赋权限的移动样式

来源：互联网发布：php socket了解编辑：程序博客网时间：2024/06/16 19:07
效果如图:

这里写图片描述
代码如下:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>拖拽演示</title>        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            .box{                width: 960px;                height: auto;                /*border: 5px solid #ddd;*/                margin: 30px auto;            }            .box1{                width: 400px;                min-height: 190px;                float: left;                border: 5px solid #360;            }            .box2{                width: 400px;                min-height: 190px;                float: right;                border: 5px solid #630;            }            li{                list-style: none;                width: 100%;                height: 30px;                line-height: 30px;                text-indent: 30px;                border-bottom: 1px solid #fff;                background: #ddd;                color: #f00;                font:800 14px/30px "微软雅黑";                cursor: pointer;            }            .box3{                width: 140px;                height: 60px;                float: left;            }            .box3 li{                background: #999;                font-weight: 800;                width: 100px;                height: 30px;                margin: 50px auto;                color: #fff;                border-radius: 5px;            }            .active{                color: #fff;                background: #f00;            }        </style>    </head>    <body>        <div class="box">            <div class="box1">                <ul>                    <li>11111111</li>                    <li>22222222</li>                    <li>33333333</li>                    <li>44444444</li>                </ul>            </div>            <div class="box3">                <li from=".box1" to=".box2">====&gt;</li>                <li from=".box2" to=".box1">&lt;====</li>            </div>            <div class="box2">                <ul>                    <li>5555555</li>                    <li>6666666</li>                    <li>7777777</li>                </ul>            </div>        </div>    </body>    <script type="text/javascript">        (function($){            $(function(){                /*给每个元素添加draggable = true属性*/                $(".box1 ul li").each(function(index,element){                    $(this).attr({"draggable":"true"});                    /*设置一个开关用来设置元素拖到的时候为打开，停止拖动的时候就关闭*/                    $(this).attr({"onOff":"false"});                    $(this).get(0).ondragstart = function(ev){//                      console.log("拖动开始");                        $(this).attr({"onOff":"true"});                        ev.dataTransfer.setData("name","");//                      console.log($(this).attr("onOff"));                    };                    $(this).get(0).ondragend = function(){                        $(this).attr({"onOff":"false"});//                      console.log("拖动结束");                        $(this).attr("class","");                    };                });                /*设置接收区域*/                //拖拽进去阻止默认事件                $(".box2").get(0).ondragenter = function(e){//                  console.log("拖拽进来");                    e.preventDefault();                };                //拖拽在里面运动的时候阻止默认事件                $(".box2").get(0).ondragover = function(e){//                  console.log("在里面运动");                    e.preventDefault();                };                //拖拽离开的时候                $(".box2").get(0).ondragleave = function(e){//                  console.log("拖拽离开");                    e.preventDefault();                };                /*拖拽投放的时候*/                $(".box2").get(0).ondrop = function(e){                    e.preventDefault();                    //判断被拖的元素是不是属于拖动的情况下                    $(".box1 ul li").each(function(){                        if($(this).attr("onOff") == "true"){                            $(".box2 ul").append($(this));                            $(this).attr("class","");                        };                    });                    $("box2 ul li").each(function(){                        $(this).attr("class","");                    });                    /*对拖拽进去的元素去除拖拽及开关判断*///                  $(".box2 ul li").each(function(index,element){//                      $(this).removeAttr("draggable").end().removeAttr("onOff");//                  });                };                $(".box2 ul li").each(function(index,element){                    $(this).attr({"draggable":"true"});                    /*设置一个开关用来设置元素拖到的时候为打开，停止拖动的时候就关闭*/                    $(this).attr({"onOff":"false"});                    $(this).get(0).ondragstart = function(ev){//                      console.log("拖动开始");                        $(this).attr({"onOff":"true"});                        ev.dataTransfer.setData("name","");//                      console.log($(this).attr("onOff"));                    };                    $(this).get(0).ondragend = function(){                        $(this).attr({"onOff":"false","class":""});//                      console.log("拖动结束");                    };                });                /*设置接收区域*/                //拖拽进去阻止默认事件                $(".box1").get(0).ondragenter = function(e){//                  console.log("拖拽进来");                    e.preventDefault();                };                //拖拽在里面运动的时候阻止默认事件                $(".box1").get(0).ondragover = function(e){//                  console.log("在里面运动");                    e.preventDefault();                };                //拖拽离开的时候                $(".box1").get(0).ondragleave = function(e){//                  console.log("拖拽离开");                    e.preventDefault();                };                /*拖拽投放的时候*/                $(".box1").get(0).ondrop = function(e){                    e.preventDefault();                    //判断被拖的元素是不是属于拖动的情况下                    $(".box2 ul li").each(function(){                        if($(this).attr("onOff") == "true"){                            $(".box1 ul").append($(this));                        };                        $(this).attr("class","");                    });                    $(".box1 ul li").each(function(index,element){                        $(this).attr("class","");                    });                    /*对拖拽进去的元素去除拖拽及开关判断*///                  $(".box1 ul li").each(function(index,element){//                      $(this).removeAttr("draggable").end().removeAttr("onOff");//                  });                };                /*---------------按钮切换js开始----------------*/                $(".box1 li,.box2 li").on("click",function(){                    $(this).toggleClass("active");                });                $(".box3 li").click(function(){                    /**                     * $(this)==$(".box"3 li)                     *                      * */                    $($(this).attr("from")).find("li.active").appendTo( $(this).attr("to")+" ul").attr("class","");                });            });        })(jQuery);    </script></html>
1 0