範例：覆寫預設的 HTML 拖入行為

Adobe AIR 1.0 以及更新的版本

此範例所實作的放下目標會顯示一份表格，以列出放下的項目所提供的每一種資料格式。

預設的行為原本是允許在應用程式內拖曳文字、連結和影像。此範例會覆寫預設的拖入行為，覆寫對象則會做為放下目標的 div 元素。為了讓不可編輯的內容能夠接受拖入手勢，主要步驟在於同時對 dragenter 和 dragover 事件發生時所傳送的事件物件呼叫 preventDefault() 方法。回應 drop 事件時，處理常式會將傳輸的資料轉換成 HTML 列元素，然後再將該列插入表格中以供顯示。

<html> 
<head> 
<title>Drag-and-drop</title> 
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
<script language="javascript"> 
    function init(){ 
        var target = document.getElementById('target'); 
        target.addEventListener("dragenter", dragEnterOverHandler); 
        target.addEventListener("dragover", dragEnterOverHandler); 
        target.addEventListener("drop", dropHandler); 
         
        var source = document.getElementById('source'); 
        source.addEventListener("dragstart", dragStartHandler); 
        source.addEventListener("dragend", dragEndHandler); 
         
        emptyRow = document.getElementById("emptyTargetRow"); 
    } 
     
    function dragStartHandler(event){         
        event.dataTransfer.effectAllowed = "copy"; 
    } 
 
    function dragEndHandler(event){ 
        air.trace(event.type + ": " + event.dataTransfer.dropEffect); 
    } 
     
    function dragEnterOverHandler(event){ 
        event.preventDefault(); 
    }     
 
    var emptyRow; 
    function dropHandler(event){ 
        for(var prop in event){ 
            air.trace(prop + " = " + event[prop]); 
        } 
        var row = document.createElement('tr'); 
        row.innerHTML = "<td>" + event.dataTransfer.getData("text/plain") + "</td>" + 
            "<td>" + event.dataTransfer.getData("text/html") + "</td>" + 
            "<td>" + event.dataTransfer.getData("text/uri-list") + "</td>" + 
            "<td>" + event.dataTransfer.getData("application/x-vnd.adobe.air.file-list") + 
            "</td>"; 
 
        var imageCell = document.createElement('td'); 
        if((event.dataTransfer.types.toString()).search("image/x-vnd.adobe.air.bitmap") > -1){ 
            imageCell.appendChild(event.dataTransfer.getData("image/x-vnd.adobe.air.bitmap")); 
        } 
        row.appendChild(imageCell); 
        var parent = emptyRow.parentNode; 
        parent.insertBefore(row, emptyRow); 
    } 
</script> 
</head> 
<body onLoad="init()" style="padding:5px">  
<div> 
    <h1>Source</h1> 
       <p>Items to drag:</p> 
    <ul id="source"> 
         <li>Plain text.</li> 
           <li>HTML <b>formatted</b> text.</li> 
           <li>A <a href="http://www.adobe.com">URL.</a></li> 
           <li><img src="icons/AIRApp_16.png" alt="An image"/></li> 
           <li style="-webkit-user-drag:none;"> 
         Uses "-webkit-user-drag:none" style. 
           </li> 
           <li style="-webkit-user-select:none;"> 
         Uses "-webkit-user-select:none" style. 
           </li> 
 
       </ul> 
</div> 
<div id="target" style="border-style:dashed;"> 
    <h1 >Target</h1> 
       <p>Drag items from the source list (or elsewhere).</p> 
       <table id="displayTable" border="1"> 
         <tr><th>Plain text</th><th>Html text</th><th>URL</th><th>File list</th><th>Bitmap Data</th></tr> 
           <tr id="emptyTargetRow"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
       </table> 
       </div> 
</div> 
</body> 
</html>