HTML5實(shí)現(xiàn)拖放的方法

發(fā)布時(shí)間：2020-10-24 16:59:50 來源：億速云閱讀：161 作者：小新欄目：web開發(fā)

小編給大家分享一下HTML5實(shí)現(xiàn)拖放的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在html5中，支持拖放API接口，通過該功能，數(shù)據(jù)可以在瀏覽器與其他應(yīng)用程序之間互相拖放，想要實(shí)現(xiàn)該操作，必須經(jīng)過一下兩個(gè)步驟
（1）將想要拖放的對(duì)象標(biāo)簽的draggable屬性設(shè)為true。這樣才能將該標(biāo)簽進(jìn)行拖放，令外，img標(biāo)簽與a標(biāo)簽必須指定為true，默認(rèn)允許拖放。
(2)編寫與有拖放有關(guān)的事件處理代碼，常用的播放事件如下：
dragstart 開始拖放操作
drag 拖放過程中
dragenter 被拖放的標(biāo)簽開始進(jìn)入本標(biāo)簽的范圍內(nèi)
dragover 被拖放的標(biāo)簽正在本標(biāo)簽范圍內(nèi)移動(dòng)
dragleave 被拖放的標(biāo)簽離開本標(biāo)簽的范圍
drop 有其他的標(biāo)簽被拖放到本標(biāo)簽中
dragend 拖放操作結(jié)束

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init() 
{
    // (1) 拖放開始
    source.addEventListener("dragstart", function(ev) 
    {
       //(1) 向dataTransfer對(duì)象追加數(shù)據(jù)
        var dt = ev.dataTransfer;
        dt.effectAllowed = 'all';    
       //(2) 拖動(dòng)元素為dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "你好"); 
    }, false);
      // (3) dragend：拖放結(jié)束
    dest.addEventListener("dragend", function(ev) 
    {
        //不執(zhí)行默認(rèn)處理（拒絕被拖放）
        ev.preventDefault();
     }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 從DataTransfer對(duì)象那里取得數(shù)據(jù)
        var dt = ev.dataTransfer;
        //(5) 不執(zhí)行默認(rèn)處理（拒絕被拖放）
        ev.preventDefault();
        //停止事件傳播
        ev.stopPropagation();
    }, false);
}
</script>
</head>
<body onload="init()">
<h6>請(qǐng)拖放</h6>
</html>

在上述的代碼中，在頁(yè)面加載時(shí)，自動(dòng)觸發(fā)inint()事件。該事件中包括拖放開始，被拖放和結(jié)束拖放三個(gè)函數(shù)。在瀏覽器中打開該網(wǎng)頁(yè)，鼠標(biāo)拖動(dòng)顯示到網(wǎng)頁(yè)中的晚間圖片，網(wǎng)頁(yè)會(huì)自動(dòng)加載要的內(nèi)容。

看完了這篇文章，相信你對(duì)HTML5實(shí)現(xiàn)拖放的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

HTML5實(shí)現(xiàn)拖放的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽