html5-drop,drag+javaScript实现本地图片上传，图片位置调换【html5拖拽】

html5 图片拖拽更换位置

前端大鱼

1660人浏览 · 2022-04-25 20:47:15

前端大鱼 · 2022-04-25 20:47:15 发布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }



        .container {
            margin: 20px auto;
            width: 1200px;
            height: 600px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: hidden;
        }

        .demo {
            display: inline-block;
            margin: 5px;

        }



        .addbtn:hover {
            border-color: rgb(0, 217, 255);
        }

        .addbtn:hover .add-ico {
            color: rgb(0, 217, 255);
        }

        .drag {
            width: 225px;
            height: 200px;
            /* display: inline-block; */
            border: 1px dashed #ddd;
            overflow: hidden;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 2px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .addbtn {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            position: relative;
            width: 225px;
            height: 206px;
            border: 1px dashed #ccc;
            box-sizing: border-box;
            border-radius: 10px;

        }

        .drag img {
            /* display: block; */
            border: 0;
            /* margin-top: 50%; */
            /* transform: translateY(-50%); */
            vertical-align: middle;

            width: 220px;
            height: 200px;
            padding: 5px;
            background-color: #fff;
            max-width: 100%;
            box-sizing: border-box;
            transition: all .5s;
        }

        .demo:hover .drag>img {
            transform: scale(1.1);
            cursor: pointer;
            pointer-events: none;
        }

        .addbtn-a {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            width: 225px;
            height: 206px;
            overflow: hidden;
            opacity: 0;
            cursor: pointer;
        }

        .add-ico {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
            width: 225px;
            height: 206px;
            line-height: 206px;
            text-align: center;
            font-size: 56px;
            font-weight: 700;
            color: #ccc;
        }
    </style>
</head>

<body>
    <div class="container" id="container">
        <!-- <div class="add-img">
            <img src="https://img-home.csdnimg.cn/images/20200826030433.jpg" alt="..." class="">
            <div class="img-mask">
                <i class="bi bi-person-plus"></i>
                <i class="bi bi-trash3 img-del"></i>
            </div>
        </div> -->
        <div class="demo">
            <div class="addbtn">
                <input type="file" multiple class="addbtn-a" id="add">
                <i class="bi bi-plus-lg add-ico"></i>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var add = document.querySelector("#add");
        var container = document.querySelector("#container");
        add.onchange = function () {
            // console.log(this.files.length)
            for (var i = 0; i < this.files.length; i++) {
                updateAdd(this.files[i])
            }
        }

        function updateAdd(fileList) {
            var reader = new
            FileReader();
            reader.readAsDataURL(fileList);
            reader.onload = function () {
                str = `<div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)"
        ondrop="drop(event,this)"><img src=${reader.result} alt="..." class=""></div>`;
                var div = document.createElement("div");
                div.setAttribute("class", "demo")
                div.innerHTML = str;
                console.log(container);
                console.log(div);
                // console.log(container.firstElementChild);
                // container.appendChild(div);
                container.insertBefore(div, container.firstElementChild);

            }

        }
        var srcEl = null;
        function drag(e, el) {
            srcEl = el;
            e.dataTransfer.setData("text/html", el.innerHTML);
        }
        function drop(e, el) {
            e.preventDefault();
            // e.stopPropagation();
            if (srcEl != el) {
                srcEl.innerHTML = el.innerHTML;
                el.innerHTML = e.dataTransfer.getData("text/html");
            }
        }
        function allowDrop(e) {
            e.preventDefault();
        }
    </script>
</body>

</html>

可以任意更换图片位置