Ejemplo: Supresión del comportamiento predeterminado de arrastrar hacia dentro en HTML

Adobe AIR 1.0 y posterior

Este ejemplo implementa un destino que presenta una tabla con todos los formatos de datos disponibles en el elemento colocado.

Se utiliza el comportamiento predeterminado para poder arrastrar texto, vínculos e imágenes dentro de la aplicación. El ejemplo suprime el comportamiento predeterminado de arrastrar hacia dentro para el elemento div que sirve como destino. El paso clave para permitir que el contenido no editable acepte un gesto de arrastrar hacia dentro es llamar al método preventDefault() del objeto de evento distribuido tanto para el evento dragenter como para el evento dragover . Como respuesta a un evento drop , el controlador convierte los datos transferidos en elemento de fila de HTML e inserta la fila en una tabla para visualizarla.

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