前端拖拽Demo_前端可拖拽大屏demo-优快云博客

本文链接：https://blog.youkuaiyun.com/f_h_h/article/details/134351920
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>拖拽事件</title>
    <style>
        body, html {
            background: #fefefe;
            padding: 0;
            margin: 0;
        }

        div.drop {
            width: calc(100% - 24px);
            min-height: 50px;
            padding: 10px;
            border: 2px solid #aaaaaa;
            overflow: hidden;
        }

        div.drop .notag {
            position: relative;
            display: flex;
            overflow: hidden;
            margin-bottom: 4px;
            border: 1px solid #d0d0d0;
            height: 50px;
            cursor: grab;
        }

        div.drop .notag:last-child {
            margin-bottom: 0;
        }

        div.drop.asset .notag.drop-active {
            border: 1px solid red;
        }

        div.drop .notag.drop-active {
            border: 1px solid #03ff03;
        }

        img {
            width: 100%;
            height: auto;
        }

        div#edit {
            padding: 5px;
            border: 1px solid rgba(0, 0, 0, 0);
        }

        div#edit:focus-visible {
            outline: none;
            border: 1px solid #5FB878;
        }

        .container {
            display: flex;justify-content: space-around;
        }

        .container > div {
            width: 24.9%;overflow: hidden;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <h2>仓库（内容复制）</h2>
        <div class="drop drop-contain asset" data-type="*" ondrop="drop(event)">
            <div id="1" class='notag  img clone' draggable="true" ondragstart="dragstart(event)"
                 ondragenter="dragenter(event)" ondragover="dragover(event)"
                 ondragleave="dragleave(event)"
                 ondragend="dragend(event)">
                <div>图片1</div>
                <img alt=""
                     src="D:\Users\feihh\Pictures\表情\chiikawa\1d30151474979410f18a73f46f831f53382573593.gif@.webp"/>
            </div>

            <div id="2" class='notag img clone' draggable="true" ondragstart="dragstart(event)"
                 ondragenter="dragenter(event)" ondragover="dragover(event)"
                 ondragleave="dragleave(event)"
                 ondragend="dragend(event)">
                <div>图片2</div>
                <img alt=""
                     src="D:\Users\feihh\Pictures\表情\chiikawa\1e85d2a3517d8c4c38858daf409ac256382573593.gif@.webp"/>
            </div>

            <div id="3" class='notag img clone' draggable="true" ondragstart="dragstart(event)"
                 ondragenter="dragenter(event)" ondragover="dragover(event)"
                 ondragleave="dragleave(event)"
                 ondragend="dragend(event)">
                <div>图片3</div>
                <img alt="" src="D:\Users\feihh\Pictures\表情\chiikawa\18dd75f3d8324817a51da612d51a2bf6.webp"/>
            </div>
        </div>
    </div>

    <div>
        <h2>内容区1</h2>
        <div class="drop drop-contain" ondrop="drop(event)" ondragover="dragover(event)">
            <div id="4" class='notag  img' data-type="9876544455" draggable="true" ondragstart="dragstart(event)"
                 ondragenter="dragenter(event)"
                 ondragover="dragover(event)"
                 ondragleave="dragleave(event)"
                 ondragend="dragend(event)">
                <div>图片4</div>
                <img alt="" src="D:\Users\feihh\Pictures\PixPin_2024-10-09_11-38-22.png"/>
            </div>
        </div>
    </div>

    <div>
        <h2>内容区2</h2>
        <div class="drop drop-contain" ondrop="drop(event)" ondragover="dragover(event)">
            <div id="5" class='notag  img' data-type="7864315110" draggable="true" ondragstart="dragstart(event)"
                 ondragenter="dragenter(event)"
                 ondragover="dragover(event)"
                 ondragleave="dragleave(event)"
                 ondragend="dragend(event)">
                <div>图片5</div>
                <img alt="" src="D:\Users\feihh\Pictures\PixPin_2024-10-09_11-39-53.png"/>
            </div>
        </div>
    </div>

    <div>
        <h2>垃圾箱</h2>
        <div class="drop drop-contain" ondrop="drop(event)" ondragover="dragover(event)"
             style="border: 2px solid red;">

        </div>
    </div>
</div>

<div><span contenteditable="true" id="edit" data-text="这是一个可编辑的div。1">这是一个可编辑的span。</span>


    <script>
        function dragover(ev) {
            //阻止浏览器默认行为，使浏览器可以被拖拽
            ev.preventDefault();
            let currentTarget = ev.currentTarget;
            currentTarget.classList.add("drop-active");
        }

        function dragstart(ev) {

            ev.dataTransfer.setData("text/plain", ev.currentTarget.id); // 获取元素并储存起来
        }

        function dragenter(ev) {
            ev.preventDefault();

            let currentTarget = ev.currentTarget;
            currentTarget.classList.add("drop-active");
        }

        function dragleave(ev) {
            ev.preventDefault();

            let currentTarget = ev.currentTarget;
            currentTarget.classList.remove("drop-active");
        }

        // 持有源元素
        function dragend(ev) {
            ev.preventDefault();
            let currentTarget = ev.currentTarget;
            currentTarget.classList.remove("drop-active");
        }

        // ondrop
        function drop(ev) {
            ev.preventDefault();
            newDrop(ev)
        }

        let i = 5;

        function newDrop(ev) {
            //通过类型获取值
            let id = ev.dataTransfer.getData("text/plain");
            //将图片追加到当前元素的子元素中
            //target当前元素本身
            let current = document.getElementById(id);
            let target = getTarget(ev.target);
            if (target == null || current === target) { // 源元素和目标元素一样 不改变
                return;
            }
            console.log(current)
            if (current.parentNode === target) { // 目标元素就是父容器 不改变
                return;
            }
            if (target.parentNode.classList.contains('asset')) { // 目标元素就是父容器 不改变
                // 禁止往仓库拖拽
                target.classList.remove("drop-active");
                return;
            }

            current = getCurrent(current);
            if (!target.classList.contains('notag')) {
                target.appendChild(current);
                return;
            }
            let moveLayerY = ev.y + window.scrollY;
            let currentBottom = current.offsetTop + current.offsetHeight;
            if (moveLayerY > currentBottom) { // 插入目标元素之后
                target.after(current);
                target.classList.remove("drop-active");
                return;
            }
            target.parentNode.insertBefore(current, target); // 插入目标元素之前
            target.classList.remove("drop-active");
        }

        function getTarget(target) {
            if (!target.classList) {
                return null;
            }
            let targetClassList;
            while (target) {
                targetClassList = target.classList;
                if (targetClassList.contains("notag") || targetClassList.contains("drop-contain")) {
                    return target;
                }
                target = target.parentNode;
            }
        }

        function getCurrent(current) {
            if (current.parentNode.classList.contains('asset')) {
                current = current.cloneNode(true);
                current.id = ++i;
            }
            return current;
        }

        document.getElementById("edit").addEventListener("blur", (e) => {
            let resource = e.target.attributes['data-text'].value;
            if (resource !== e.target.textContent) {
                console.log(e.target.textContent)
                e.target.attributes['data-text'].value = e.target.textContent
            }

        }, false);
    </script>
</body>
</html>