Exempel: Åsidosätta standardbeteendet för indragning i HTML

Adobe AIR 1.0 och senare

Det här exemplet implementerar ett släppmål som visar en tabell med alla dataformat som finns i det släppta objektet.

Standardbeteendet som används för att tillåta att text, länkar och bilder dras inom programmet. Exemplet åsidosätter standardbeteendet för indragning för div-elementet som fungerar som släppmål. Nyckelsteget när du gör det möjligt för icke redigerbart innehåll att acceptera en indragningsgest är att anropa metoden preventDefault() för händelseobjektet, som skickas för både händelsen dragenter och dragover. Som svar på en drop-händelse konverterar hanteraren den överförda informationen till ett HTML-radelement och infogar raden till en tabell för visning.

<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>