html5中的拖拽功能

時間 2019-12-15

標籤 html5 html 功能欄目 HTML5 简体版

原文原文鏈接

拖拽元素支持的事件

ondrag 應用於拖拽元素，整個拖拽過程都會調用

ondragstart 應用於拖拽元素，當拖拽開始時調用

ondragleave 應用於拖拽元素，當鼠標離開拖拽元素是調用

ondragend 應用於拖拽元素，當拖拽結束時調用

目標元素支持的事件

ondragenter 應用於目標元素，當拖拽元素進入時調用

ondragover 應用於目標元素，當停留在目標元素上時調用

ondrop 應用於目標元素，當在目標元素上鬆開鼠標時調用

ondragleave 應用於目標元素，當鼠標離開目標元素時調用

注意：瀏覽器默認會阻止ondrop事件：咱們必須在ondrapover中阻止默認行爲

實現了一個拖拽功能，實際上是能夠作成一個小遊戲的。

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        .div1,
        .div2,
        .div3 {
            margin: 0 20px;
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        div{
            display: flex;
            flex-direction: column;
            align-items: center
        }
        p{
            display: flex;
            flex-direction: column;
            align-items: center
        }

        .p1 {
            width: 50px;
            background-color: pink;
            margin: 5px 0;
        }

        .p2 {
            width: 80px;
            background-color: burlywood;
            margin: 5px 0;
        }
        .p3 {
            width: 110px;
            background-color: rgb(133, 88, 29);
            margin: 5px 0;
        }
        .p4 {
            width: 140px;
            background-color: rgb(172, 37, 48);
            margin: 5px 0;
        }
        .p5 {
            width: 170px;
            background-color: rgb(17, 182, 31);
            margin: 5px 0;
        }
        .p6 {
            width: 200px;
            background-color: rgb(90, 33, 155);
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div id="div1" class="div1">
        <!-- 在h5中，若是想拖拽元素，就必須爲元素添加draggable="true"。圖片和超連接默認就能夠拖拽 -->
        <p id="pe3" class="p3" draggable="true">3</p>
        <p id="pe2" class="p2" draggable="true">2</p>
        <p id="pe5" class="p5" draggable="true">5</p>
        <p id="pe1" class="p1" draggable="true">1</p>
        <p id="pe6" class="p6" draggable="true">6</p>
        <p id="pe4" class="p4" draggable="true">4</p>
    </div>
    <div id="div2" class="div2"></div>

    <div id="div3" class="div3"></div>

    <script>
        /* 拖拽元素支持的事件
            ondrag 應用於拖拽元素，整個拖拽過程都會調用
            ondragstart 應用於拖拽元素，當拖拽開始時調用
            ondragleave 應用於拖拽元素，當鼠標離開拖拽元素是調用
            ondragend 應用於拖拽元素，當拖拽結束時調用

            目標元素支持的事件
            ondragenter 應用於目標元素，當拖拽元素進入時調用
            ondragover 應用於目標元素，當停留在目標元素上時調用
            ondrop 應用於目標元素，當在目標元素上鬆開鼠標時調用
            ondragleave 應用於目標元素，當鼠標離開目標元素時調用
        */

        // var obj = null; /* 當前被拖拽的值*/

        document.ondragstart = function (e) {
            /*經過dataTransfer來實現數據的存儲與獲取
                setData(format, data)
                format: 數據的類型： text/html  text/uri-list
                Data: 數據： 通常來講是字符串值
            */
            // e.dataTransfer.setData("Text", e.target.id);
            e.target.style.opacity = 0.5
            e.dataTransfer.setData("text", e.target.id);
            console.log(e.target.id)
        }

        document.ondragend = function (e) {
            e.target.style.opacity = 1;
        }

        /*瀏覽器默認會阻止ondrop事件：咱們必須在ondrapover中阻止默認行爲*/
        document.ondragover = function (e) {
            e.preventDefault();
        }

        document.ondrop = function (e) {
            /*經過e.dataTransfer.setData存儲的數據，只能在drop事件中獲取*/
            var data = e.dataTransfer.getData("text");
            e.target.appendChild(document.getElementById(data));
        }

    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。