拖拽去除元素

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } 
    .drag {
        position: fixed;
        top: 20px;
        right: 80px;
        width: 90px;
        height: 40px;
        /* width: 260px;
        height: auto; */
        box-sizing: border-box;
        border-radius: 20px;
        display: flex;
        padding: 5px 10px;
        border: 1px solid #ccc;
        background: #fff;
    }

    .drag-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        line-height: 0;
    }

    .drag-icon img {
        width: 100%;
        border-radius: 50%
    }

    .drag-config {
        margin-right: 10px;
        position: relative;
    }

    .drag:hover {
        cursor: move;
    }

    .drag-content {
        cursor: pointer;
        display: none;
        width: 200px;
        height: auto;
        box-sizing: border-box;
    }

    .drag-info {
        width: 100%;
        max-height: 600px;
        min-height: 200px;
        border: 1px solid cyan;
        border-radius: 10px;
        overflow-y: auto;
    }

    .drag-seach {}

    .drag-select {
        padding: 5px 0;
        display: inline-block;
        position: relative;
    }

    .select-brief {
        padding: 5px 10px;
        border: 1px solid #ccc;
        display: inline-block;
        border-radius: 40px;
        font-size: 16px;
    }

    .drag-select:hover .select-info {
        display: block;
    }

    .select-info {
        position: absolute;
        top: 40px;
        width: auto;
        left: 0;
        background: #fff;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        padding: 8px 10px;
        border-radius: 10px;
        white-space: nowrap;
        display: none;
    }

    .select-info li {
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        padding: 3px 15px;
    }

    .select-info li:hover {
        border-radius: 10px;
        background: greenyellow;
    }

    ul {
        list-style: none;
    }
</style>
</head> <body> <div class="drag"> <div class="drag-icon drag-config"> <img src="https://showdoc.keytop.cn/Public/Uploads/2024-04-28/662dbe484313f.png" alt=""> <div> <ul class="select-info config-select"> <li>默认查询</li> <li>翻译为中文</li> <li>翻译为英文</li> </ul> </div> </div> <div class="drag-icon drag-seach"> <img src="https://showdoc.keytop.cn/Public/Uploads/2024-04-28/662dbe484313f.png" alt=""> </div> <div class="drag-content"> <div class="drag-info"> dsfsdf </div> <div class="drag-select"> <div class="select-brief"> 理解文章 </div> <ul class="select-info"> <li>默认查询</li> <li>翻译为中文</li> <li>翻译为英文</li> </ul> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script> let box = document.querySelector('.drag') let dragIcon = document.querySelector('.drag-config') let dragS = document.querySelector('.drag-seach') let content = document.querySelector('.drag-content') let config = document.querySelector('.config-select') dragIcon.onmouseenter = function () { config.style.display = 'block' } dragIcon.onmouseleave = function () { config.style.display = 'none' } dragS.onclick = function () { dragS.style.display = 'none' content.style.display = 'block' box.style.width = '260px' box.style.height = 'auto' box.style.boxShadow = 'inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)' } // box.onmousedown = function (ev) { // let e = ev || event; // e.preventDefault() // let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离 // let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离 // document.onmousemove = function (ev) { // let e = ev || event; // box.style.left = ev.clientX - x + 'px'; // box.style.top = ev.clientY - y + 'px'; 
    //         let bodyScreenX = ev.screenX
    //         let bodyClientWidth = document.body.clientWidth
    //         e.preventDefault()
    //         document.onmouseup = function (ev) {
    //             if (ev.clientX - x < 0) {
    //                 box.style.left = 0
    //             } else if (bodyScreenX > bodyClientWidth) {
    //                 box.style.right = 0
    //                 box.style.left = bodyClientWidth - 100 + 'px'
    //             }
    //             document.onmousemove = null;
    //             document.onmouseup = null;
    //         }
    //     }
    // }


    var draggable = function (modal, handle, a) {

        var isDragging = false;

        var startX = 0,
            startY = 0,

            left = 0,
            top = 0;

        var dragStart = function (e) {

            var e = e || window.event;

            e.preventDefault();
            var flag = false
            $.each(a, function (i, v) {
                // 获取需要排除的元素
                var elemCancel = $(e.target).closest(v);
                // 如果拖拽的是排除元素，函数返回
                if (elemCancel.length) {
                    flag = true
                }
            })
            if (flag) {
                return true
            }
            // // 获取需要排除的元素
            // var elemCancel = $(e.target).closest(cancle);
            // // 如果拖拽的是排除元素，函数返回
            // if (elemCancel.length) {
            //     return true;
            // }

            isDragging = true;

            startX = e.clientX;
            startY = e.clientY;

            left = $(modal).offset().left;
            top = $(modal).offset().top;

        }

        var dragMove = function (e) {

            var e = e || window.event;

            e.preventDefault();

            if (isDragging) {

                var endX = e.clientX,
                    endY = e.clientY,

                    relativeX = endX - startX,
                    relativeY = endY - startY;

                $(modal).css({
                    left: relativeX + left + 'px',
                    top: relativeY + top + 'px'
                });

            }

            return false;

        }

        var dragEnd = function (e) {

            isDragging = false;

        }

        $(handle).on('mousedown', dragStart);

        $(document).on('mousemove', dragMove);

        $(document).on('mouseup', dragEnd);
    }
    var a = ['.drag-content', '.drag-config', '.drag-seach',]
    draggable('.drag', '.drag', a);

</script>
</body>
posted @ 2025-01-14 23:42  问君~知否  阅读(12)  评论(0)    收藏  举报