HTML5拖放效果的實作程式碼-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5拖放效果的實作程式碼

黄舟

Feb 21, 2017 pm 01:11 PM

html5

拖曳

拖曳是一種常見的特性，即抓取物件以後拖曳到另一個位置。

在 HTML5 中，拖曳是標準的一部分，任何元素都能夠拖曳。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支援拖曳。

注意:Safari 5.1.2不支援拖曳.

實例:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>  
    <script>  
        function allowDrop(ev) {  
            ev.preventDefault();  
        }  
        function drag(ev) {  
            ev.dataTransfer.setData("Text", ev.target.id);  
        }  
        function drop(ev) {  
            ev.preventDefault();  
            var data = ev.dataTransfer.getData("Text");  
            ev.target.appendChild(document.getElementById(data));  
        }  
    </script>  
</head>  
<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img  src="/static/imghwm/default1.png"  data-src="img/bg_1.jpg"  class="lazy"  id="drag1"  draggable="true" ondragstart="drag(event)"     style="max-width:90%" height="180px" / alt="HTML5拖放效果的實作程式碼" >  
</body>  
</html>

首先，為了讓元素可拖曳，把draggable 屬性設為true ： HTML5拖放效果的實作程式碼

然後，規定當元素被拖曳時，會發生什麼。
在上面的範例中，ondragstart 屬性呼叫了一個函數，drag(event)，它規定了被拖曳的資料。
dataTransfer.setData() 方法設定被拖曳資料的資料型別和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在這個範例中，數據類型是"Text"，值是可拖曳元素的id ("drag1")。

ondragover 事件規定在何處放置被拖曳的資料。
預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
這要透過呼叫ondragover 事件的 event.preventDefault() 方法：event.preventDefault()

當放置被拖曳資料時，會發生drop事件。
在上面的範例中，ondrop 屬性呼叫了一個函數，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

程式碼解釋：

呼叫preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）
透過dataTransfer.getData("Text" ) 方法取得被拖曳的資料。此方法將傳回在 setData() 方法中設定為相同類型的任何資料。
被拖曳資料是被拖曳元素的id ("drag1")
把被拖曳元素追加到放置元素（目標元素）中

來回拖曳：

若要在兩個地方來回拖曳，只要將上面程式碼稍作修改就行了.
將body中的程式碼改成:

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img  src="/static/imghwm/default1.png"  data-src="img/bg_1.jpg"  class="lazy"  id="drag1"  draggable="true" ondragstart="drag(event)"     style="max-width:90%" height="180px" / alt="HTML5拖放效果的實作程式碼" ></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

然後在style樣式中加上#p2就可以了：

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

這樣就可以實作來回拖放了。

以上就是HTML5拖放效果的實作程式碼的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

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

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。