詳解HTML5拖放功能實例-H5教程-PHP中文網

首頁

web前端

H5教程

詳解HTML5拖放功能實例

零下一度

Jul 16, 2017 pm 03:37 PM

h5html5拖放

HTML5提供專門的拖曳與拖曳的API，以後實現這類效果就不必亂折騰了。但是，考慮到Opera瀏覽器似乎對此不感冒，在通用性上有待商榷，所以這裡也就簡單說一說。拖放（Drag 和 drop）是 html5 標準的組成部分。

瀏覽器支援

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。

被拖曳元素，dragElement :

1、新增事件：ondragstart

2、新增屬性：dragable

放置元素，dropElement:

1、新增事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop

與mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會用例子來說明。

1、頁面上元素間的拖放

下面用個小例子，p間的拖放來展示，各個事件如何被觸發：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>

    <style type="text/css">

        #dropEle
        p
        {
            float: left;
        }

    </style>

    <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>


    <script type="text/javascript">

        /**
         * 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
         * 浏览器支持
         *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
         */
        $(function ()
        {
            $("#dragEle")[0].ondragstart = function (event)
            {
                console.log("dragStart");
                event.dataTransfer.setData("Text", event.target.id);
            };

            /**
             * 当放置被拖数据时，会发生 drop 事件。
             * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
             * @param event
             */
            $("#dropEle")[0].ondrop = function (event)
            {
             /*   for (var p in event.dataTransfer)
                {
                    console.log(p + " = " + event.dataTransfer[p] + " @@");
                }
            */
                console.log("onDrop");
                var id = event.dataTransfer.getData("Text");
                $(this).append($("#" + id).clone().text($(this).find("p").length));
                event.preventDefault();
            };

            /**
             * ondragover 事件规定在何处放置被拖动的数据。
             *默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
             */
            $("#dropEle")[0].ondragover = function (event)
            {
                console.log("onDrop over");
                event.preventDefault();
            }

            $("#dropEle")[0].ondragenter = function (event)
            {
                console.log("onDrop enter");
            }

            $("#dropEle")[0].ondragleave = function (event)
            {
                console.log("onDrop leave");
            }

            $("#dropEle")[0].ondragend = function (event)
            {
                console.log("onDrop end");
            }


        });

    </script>

</head>
<body>

<p style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
     draggable="true" id="dragEle" >

</p>


<p style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
     id="dropEle"></p>


</body>
</html>

需要注意幾點：

a、ondragover中必須組織事件的預設行為，預設地，無法將資料/元素放置到其他元素中。

b、drop 事件的預設行為是以連結形式打開，所以也需要阻止其預設行為。

還有可能注意到：在拖放時，event中包含一個event.dataTransfer 對象，上例中我們使用了該對象的setData方法傳遞了拖曳p的id，然後在drop中取得該id，並且複製了該元素添加到放置的p中。

下面介紹下該物件的其他方法：

event.dataTransfer ：

items = [object DataTransferItemList] @@drag_drop.html:44

# files = [object FileList] @@drag_drop.html:44

types = text/plain @@drag_drop.html:44

#effectAllowed = all @@drag_drop.html:44

effectAllowed = all @@drag_drop.html:44

dropEffect = none @@drag_drop.html:44

clearData = function clearData() { [native code] } @@drag_drop.html:44

#getData = function getData() { [native code] } @@drag_drop.html:44

setData = function setData() { [native code] } @@drag_drop.html:44

setDragImage = function setDragImage() { [native code] } @@

我使用了js列印出了它所有的屬性:

1、getData,setData上例已經使用了，clearData就是清除設定的資料。

2、值得注意的是files，當把作業系統中選擇的一個或多個檔案拖入該p中，files中會儲存拖入檔案的信息，然後我們透過file可以得到檔案的類型，長度，內容然後實現上傳。

3、setDragImage(image, x, y)用於設定滑鼠移動過程中隨滑鼠一起移動的效果圖。必須在dragstart中設定。

4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖曳過程中滑鼠顯示的樣式，我覺得可以忽略了這幾個屬性，一般用不到。

相關重點

DataTransfer 物件：退化物件用來傳遞的媒介，使用一般為Event.dataTransfer。

draggable 屬性：就是標籤元素要設定draggable=true，否則不會有效果，例如：

列表1

ondragstart 事件：當拖曳元素開始被拖曳的時候觸發的事件，此事件作用在被拖曳元素上

ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上

ondragover 事件：拖曳元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上

ondrop 事件：被拖曳的元素在目標元素上同時滑鼠放開觸發的事件，此事件作用在目標元素上

ondragend 事件：當拖曳完成後觸發的事件，此事件作用在被拖曳元素上

###Event.preventDefault() 方法：阻止預設的些事件方法等執行。 ondragover中一定要執行preventDefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或檔案中拖東西進來，尤其是圖片的時候，預設的動作是顯示這個圖片或是相關訊息，並不是真的執行drop。此時需要用用document的ondragover事件把它直接幹掉。 ######Event.effectAllowed 屬性：就是拖曳的效果。 ###

以上是詳解HTML5拖放功能實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。