js 实现拖动按钮添加布局

小兔快跑zZ

于 2024-01-12 17:47:58 发布

阅读量528

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42630688/article/details/135558866

版权

文章描述了如何使用HTML、CSS和JavaScript创建一个可拖动的按钮，当在左右布局区域放置时，根据按钮类型生成H布局或V布局。通过`dragstart`,`dragover`,和`drop`事件处理程序实现布局的切换。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述
h布局生成左右布局，
v布局生成上下布局
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.min.js"></script>
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="btn btn1" draggable="true">H布局</div>
            <div class="btn btn2" draggable="true">V布局</div>
        </div>
        <div class="right " ondrop="handleDrop(event)" ondragover="allowDrop(event)">
           
        </div>

    </div>

    <script>
       let  btn1 = document.querySelector('.btn1')
       let  btn2 = document.querySelector('.btn2')
        let right = document.querySelector('.right')
        btn1.addEventListener('dragstart',function(e) {
            e.dataTransfer.setData("text/plain", "1");
        })
        btn1.addEventListener('dragover',function(event){
            event.preventDefault()
        })
        btn2.addEventListener('dragstart',function(e) {
            console.log(e,'111')
            e.dataTransfer.setData("text/plain", "2");
        })
        btn2.addEventListener('dragover',function(event){
            event.preventDefault()
        })
        function allowDrop(e) {
            e.preventDefault();
        }
        
        function handleDrop(e) {
            e.preventDefault();
            
            var data = e.dataTransfer.getData("text/plain");
            if(data==1) {
                e.target.innerHTML = ` 
                        <div class="row">
                            <div class="row-item"></div>
                            <div class="row-item"></div>
    
                        </div>
                    `

            }else {
                e.target.innerHTML = `<div class="col">
                        <div class="col-item"></div>
                        <div class="col-item"></div>

                    </div>`
            }
        }

    </script>
</body>
</html>

css 文件：

.box {
    margin: 10px;
    display: flex;
    .left {
        width: 200px;
        .btn {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: cyan;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }
    }
    .right {
        flex:1;
        border: 1px solid #000;
        min-height: 400px;
    }
}
div {
    box-sizing: border-box;
}
.df {
    flex:1;
} 
.row {
    display: flex;
    width: 100%;
    height: 100%;
    .row-item {
        flex: 0 0 50%;
        // border: 1px solid #dedede;
        height: 100%;
        &:first-child {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                width: 1px;
                height: 100%;
                background: #000;
                top: 0;
                right: 0;
            }
        }
    }
}
.col {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .col-item {
        // border: 1px solid #dedede;
        flex: 0 0 50%;
        // border-bottom: 1px solid #dedede;
        // border-right: 1px solid #dedede;
        height: 100%;
        &:first-child {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                height: 1px;
                width:  100%;
                background: #000;
                left: 0;
                bottom: 0;
            }
        }
    }
}