前端拖拽Demo

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>拖拽事件title>
    <style>
        body, html {
            background: #fefefe;
        }

        div.drop {
            width: 500px;
            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 .notag.drop-active {
            border: 1px solid #03ff03;
        }

        img {
            width: 100%;
            height: auto;
        }
    style>
head>
<body>
<div class="drop drop-contain" ondrop="drop(event)" ondragover="dragover(event)">
    <div id='img1' class='notag  img' draggable="true" ondragstart="dragstart(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)"
         ondragend="dragend(event)">
        图片1
        <img src="file:///D:/1.png" alt=""/>
    div>
    <div id='img2' class='notag img' draggable="true" ondragstart="dragstart(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)"
         ondragend="dragend(event)">
        图片2
        <img src="file:///D:/2.png" alt=""/>
    div>
    <div id='img3' class='notag img' draggable="true" ondragstart="dragstart(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)"
         ondragend="dragend(event)">
        图片3
        <img src="file:///D:/3.png" alt=""/>
    div>
div>
<br/>
<div id="div2" ondrop="drop(event)" ondragover="dragover(event)">div>
<script>
    function dragover(ev) {
        //阻止浏览器默认行为,使浏览器可以被拖拽
        ev.preventDefault();
    }

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

    function dragenter(ev) {
        ev.preventDefault();
        console.log("dragenter11111")

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

    function dragleave(ev) {
        ev.preventDefault();
        console.log("dragleave22222");
        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)
    }

    function newDrop(ev) {
        //通过类型获取值
        let id = ev.dataTransfer.getData("text/plain");
        //将图片追加到当前元素的子元素中
        //target当前元素本身
        let current = document.getElementById(id);
        let target = getTarget(ev.target);
        if (current === target) { // 源元素和目标元素一样 不改变
            return;
        }
        if (current.parentNode === target) { // 目标元素就是父容器 不改变
            return;
        }
        if (!target.classList.contains('notag')) {
            target.appendChild(current);
        }
        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.contains("notag") || target.classList.contains("drop-contain")) {
            return target;
        }
        return getTarget(target.parentNode);
    }
script>
body>
html>

你可能感兴趣的:(前端)