
<!DOCTYPE html>
<html lang="zh-Hans">

<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>HTML5 Drag and Drop</title>
    <style>
        .test-drop {
            box-sizing: border-box;
            min-width: 32px;
            min-height: 32px;
            max-width: 320px;
            max-height: 320px;
            padding: 10px;
            background-color: #333;
            border: 1px solid #777;
        }

        .test-drag {
            box-sizing: border-box;
            width: 300px;
            height: 300px;
        }

        .test-area {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div>
        https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
    </div>
    <section class="test-area">
        <p>Drag the image into the rectangle:</p>
        <div id="smg" class="test-drop" ondragover="allowDrop(event)" ondrop="drop(event)">
            <!-- place image here! -->
        </div>
        <img class="test-drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
    </section>
    <script>
        const drag = (e) => {
            e.dataTransfer.setData("logo", e.target.id);
            console.log(`drag id = `, e.dataTransfer.getData("logo"));
        };
        const drop = (e) => {
            e.preventDefault();
            let data = e.dataTransfer.getData("logo");
            console.log(`drop id = `, data);
            let element = document.getElementById(data);
            // let element = document.querySelector(`#data`);
            e.target.appendChild(element);
        };
        const allowDrop = (e) => {
            e.preventDefault();
            // ???
        };
    </script>
</body>

</html>

xyzdata commented 6 years ago

OK


<!DOCTYPE html>
<html lang="zh-Hans">

<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>HTML5 Drag and Drop</title>
    <style>
        .test-drop {
            box-sizing: border-box;
            min-width: 32px;
            min-height: 32px;
            max-width: 320px;
            max-height: 320px;
            padding: 10px;
            background-color: #333;
            border: 1px solid #777;
        }

        .test-drag {
            box-sizing: border-box;
            width: 300px;
            height: 300px;
        }

        .test-area {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div>
        https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
    </div>
    <section class="test-area">
        <p>Drag the image into the rectangle:</p>
        <div class="test-drop" ondragover="allowDrop(event)" ondrop="drop(event)">
            <!-- place image here! -->
        </div>
        <img id="img" class="test-drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
        <!-- only can move whole element -->
        <!-- id="img"  -->
        <!-- Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. -->
    </section>
    <script>
        const drag = (e) => {
            // e.target.id
            console.log(`drag id = `, e.target.id);
            e.dataTransfer.setData("logo", e.target.id);
            console.log(`drag id = `, e.dataTransfer.getData("logo"));
        };
        const drop = (e) => {
            e.preventDefault();
            let data = e.dataTransfer.getData("logo");
            // img
            console.log(`drop id = `, data);
            console.log(`drop typeof(data) = `, typeof(data));
            // string
            // let element = document.getElementById(data);
            let element = document.querySelector(`#${data}`);
            e.target.appendChild(element);
        };
        const allowDrop = (e) => {
            e.preventDefault();
            // ???
        };
    </script>
</body>

</html>

demo


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

<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>
        .drop {
            width: 350px;
            min-height: 100px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        .drag {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div>
        <div class="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <img id="drag1" class="drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
        <!-- only can move whole element -->
        <!-- id="drag1"  -->
        <!-- Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. -->
    </div>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("aaa", ev.target.id);
            console.log(`drag id = `, ev.target.id);
            console.log(`drag logo = `, ev.dataTransfer.getData("logo"));
        }

        function drop(ev) {
            ev.preventDefault();
            var dx = ev.dataTransfer.getData("aaa");
            console.log(`drop id = `, dx);
            ev.target.appendChild(document.getElementById(dx));
        }
    </script>
</body>

</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

xyzdata / Angular2017

HTML5 Drag and Drop API #2

HTML5 Drag and Drop API

cursor

HTML5 APIs

01. Media API

02. Text Track API

03. Drag and Drop

04. Offline Web Applications/Application Cache

05. User Interaction

06. History

07. MIME type and protocol handler registration

08. APIs in the WHATWG specification

09. The "HTML5" buzzword APIs

10. Demos and browser Support

??? html5

HTML5 Cross Browser Polyfills

MDN

Web APIs

demo

OK

demo