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

最新推荐文章于 2022-12-19 18:21:14 发布

水痕01

最新推荐文章于 2022-12-19 18:21:14 发布

阅读量743

点赞数 1

分类专栏： css html html5 css3

本文链接：https://blog.csdn.net/kuangshp128/article/details/69218333

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

效果如图:

这里写图片描述

代码如下:

<!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>

水痕01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于常见的左右赋权限的移动样式

效果如图:代码如下:<!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
复制链接

扫一扫