HTML 끌어당기기 효과


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #targetDiv {
            width: 300px;
            height: 300px;
            border: #4f4f4f 1px solid;
        }
    style>
head>
<body>
<div id="targetDiv" ondragover="dragover(event)" ondrop="drop(event)">div>
<img id="img" src="img_the_scream.jpg"  draggable="true" ondragstart="dragstart(event)"/>

<script>

    // 1          dageeable=“true”
    //    2       
    function dragstart(e) {
//        dataTransfer          
        //        id   
        e.dataTransfer.setData("id", e.target.id);
    }
    function dragover(e) {
        //          
        e.preventDefault();
    }
    function drop(e) {

        //         id           
        var id = e.dataTransfer.getData("id");
        e.target.appendChild(document.getElementById(id));
        e.target.removeChild(document.getElementById(id))
    }
script>
body>
html>
HTML 끌어당기기 효과

좋은 웹페이지 즐겨찾기
