[HTML5] Drag and Drop 拖曳 Sample Code

2019-10-31

6697
0
HTML

HTML5 Drag and Drop Sample Code

拖曳html文字↓

<!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>HTML5 拖曳html文字 Sample Code</title>
    <style>
        #div1 {
            border: 1px solid red;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img draggable="false" src="images/60Banana.png" alt=""> <!--<img />預設即可拖曳-->

    <div draggable="true">
            <b>zzzzz</b>
        </div>

    <div draggable="true" ondragstart="handleDrag(event)">
        <b>Some content</b> to be dragged.
    </div>
    <input type="text"/> <!--<input />預設即可被放置純文字(text/plain)-->

    <!-- <div id="div1"></div> -->
    <!--↓放置區-->
    <div id="div1" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>
    <script type="text/javascript">
        function handleDrag(event) {
            event.dataTransfer.effectAllowed = "copy";//or "move"
            event.dataTransfer.setData("text/html", event.target.innerHTML);
        }

        function handleDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
            //or "move"
            event.dataTransfer.dropEffect = "copy"; // Display a "copy" cursor
        }
        function handleDrop(event) {
            event.stopPropagation();//停止冒泡事件、事件往父容器觸發
            event.preventDefault();
            //↑上述兩行for firefox，避免瀏覽器直接Redirect
            event.target.innerHTML = event.dataTransfer.getData("text/html");
        }
    </script>

</body>

</html>

拖曳圖片↓

<!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>
        #div1 {
            border: 1px solid red;
        }
        div>img{
          
            padding: 10px;
            margin: 10px;
            border-radius: 50%;
        }
        #div1:empty{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img src="images/60Banana.png" alt="">
    <img src="images/60Lemon.png" alt="">
    <img src="images/60Orange.png" alt="">
    <img src="images/60Strawberry.png" alt="">


    <!-- <input type="text" /> -->
    
    <div id="div1" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>

    <script type="text/javascript">       

        function handleDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
            event.dataTransfer.dropEffect = "copy"; // Display a "copy" cursor
        }
        function handleDrop(event) {
            event.stopPropagation();
            event.preventDefault();

            var img=document.createElement("img");
            img.src=event.dataTransfer.getData("text/plain");
            event.target.appendChild(img);
        }
    </script>

</body>

</html>

使用者從本機電腦把圖片拖曳到網頁上↓

<!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>
        #div1 {
            border: 1px solid red;
        }

        div>img {

            padding: 10px;
            margin: 10px;
            border-radius: 50%;
        }

        #div1:empty {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <div id="div1" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>

    <script type="text/javascript">

        function handleDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
            event.dataTransfer.dropEffect = "copy"; // Display a "copy" cursor
        }
        function handleDrop(event) {
            event.stopPropagation();
            event.preventDefault();

            // var img=document.createElement("img");
            // img.src=event.dataTransfer.getData("text/plain");
            // event.target.appendChild(img);

            var f = event.dataTransfer.files[0]
            console.log(f);

            var reader = new FileReader();
            reader.onload = function (e) {
                var theImgElem = document.createElement("img");
                theImgElem.src = e.target.result;
                document.getElementById("div1").appendChild(theImgElem);
            };
            reader.onerror = function (e) {
                alert("Cannot load text file");
            };
            // Read text file (the second parameter is optional - the default encoding is "UTF-8").
            reader.readAsDataURL(f);
        }
    </script>

</body>

</html>

回首頁