溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5如何拖放功能

發(fā)布時(shí)間：2021-07-14 13:47:33 來(lái)源：億速云 閱讀：121 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“HTML5如何拖放功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5如何拖放功能”這篇文章吧。

HTML5提供專門的拖拽與拖放的API，以后實(shí)現(xiàn)這類效果就不必亂折騰了。但是，考慮到Opera瀏覽器似乎對(duì)此不感冒，在通用性上有待商榷，所以這里也就簡(jiǎn)單說(shuō)一說(shuō)。拖放（Drag 和 drop）是 html5 標(biāo)準(zhǔn)的組成部分。

瀏覽器支持

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

被拖元素，dragElement :

1、添加事件：ondragstart

2、添加屬性：dragable

放置元素，dropElement:

1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會(huì)用例子來(lái)說(shuō)明。

1、頁(yè)面上元素間的拖放

下面用個(gè)小例子，p間的拖放來(lái)展示，各個(gè)事件如何被觸發(fā)：

<!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 標(biāo)準(zhǔn)的組成部分。
         * 瀏覽器支持
         *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);
            };

            /**
             * 當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。
             * 調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）
             * @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 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
             *默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。
             */
            $("#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>

需要注意幾點(diǎn)：

a、ondragover中必須組織事件的默認(rèn)行為，默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。

b、drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)，所以也需要阻止其默認(rèn)行為。

還有可能注意到：在拖放時(shí)，event中包含一個(gè)event.dataTransfer 對(duì)象，上例中我們使用了該對(duì)象的setData方法傳遞了拖動(dòng)p的id，然后在drop中取得該id，并且復(fù)制了該元素添加到放置的p中。

下面介紹下該對(duì)象的其他方法：

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

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上例已經(jīng)使用了，clearData就是清除設(shè)置的數(shù)據(jù)。

2、值得注意的是files，當(dāng)把操作系統(tǒng)中選擇的一個(gè)或多個(gè)文件拖入該p中，files中會(huì)存儲(chǔ)拖入文件的信息，然后我們通過(guò)file可以得到文件的類型，長(zhǎng)度，內(nèi)容然后實(shí)現(xiàn)上傳。

3、setDragImage(image, x, y)用于設(shè)置鼠標(biāo)移動(dòng)過(guò)程中隨鼠標(biāo)一起移動(dòng)的效果圖。必須在dragstart中設(shè)置。

4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖拽過(guò)程中鼠標(biāo)顯示的樣式，我覺(jué)得可以忽略了這幾個(gè)屬性，一般用不到。

相關(guān)重點(diǎn)

DataTransfer 對(duì)象：退拽對(duì)象用來(lái)傳遞的媒介，使用一般為Event.dataTransfer。

draggable 屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否則不會(huì)有效果，例如：

<div title="拖拽我" draggable="true">列表1</div>

ondragstart 事件：當(dāng)拖拽元素開(kāi)始被拖拽的時(shí)候觸發(fā)的事件，此事件作用在被拖曳元素上

ondragenter 事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上

ondragover 事件：拖拽元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上

ondrop 事件：被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開(kāi)觸發(fā)的事件，此事件作用在目標(biāo)元素上

ondragend 事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上

Event.preventDefault() 方法：阻止默認(rèn)的些事件方法等執(zhí)行。在ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會(huì)被觸發(fā)。另外，如果是從其他應(yīng)用軟件或是文件中拖東西進(jìn)來(lái)，尤其是圖片的時(shí)候，默認(rèn)的動(dòng)作是顯示這個(gè)圖片或是相關(guān)信息，并不是真的執(zhí)行drop。此時(shí)需要用用document的ondragover事件把它直接干掉。

Event.effectAllowed 屬性：就是拖拽的效果。

以上是“HTML5如何拖放功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手