Arrastrar datos hacia fuera de un elemento en HTML

Adobe AIR 1.0 y posterior

Configuración de los datos arrastrados

El comportamiento predeterminado permite copiar la mayoría del contenido de una página HTML arrastrándolo. Se puede controlar el contenido que puede arrastrarse utilizando las propiedades de CSS -webkit-user-select y -webkit-user-drag .

Suprima el comportamiento predeterminado de arrastrar hacia fuera en el controlador del evento dragstart . Llame al método setData() de la propiedad dataTransfer del objeto de evento para incluir sus propios datos en el gesto de arrastrar.

Para indicar qué efectos de arrastrar admite un objeto de origen cuando no dependa del comportamiento predeterminado, defina la propiedad dataTransfer.effectAllowed del objeto de evento distribuido para el evento dragstart . Se puede escoger cualquier combinación de efectos. Por ejemplo, si un elemento de origen admite tanto el efecto copiar como el efecto vincular , defina la propiedad en "copyLink" .

Configuración de los datos arrastrados

Añada los datos para el gesto de arrastrar en el controlador del evento dragstart con la propiedad dataTransfer . Utilice el método dataTransfer.setData() para poner los datos en el portapapeles, pasando el tipo MIME y los datos a transferir.

Por ejemplo, si tiene un elemento de imagen en la aplicación con el ID imageOfGeorge , podría utilizar el siguiente controlador del evento dragstart. Este ejemplo añade representaciones de una imagen de George en varios formatos de datos, lo cual aumenta la probabilidad de que otras aplicaciones puedan utilizar los datos arrastrados.

function dragStartHandler(event){         
    event.dataTransfer.effectAllowed = "copy"; 
     
    var dragImage = document.getElementById("imageOfGeorge"); 
    var dragFile = new air.File(dragImage.src); 
    event.dataTransfer.setData("text/plain","A picture of George"); 
    event.dataTransfer.setData("image/x-vnd.adobe.air.bitmap", dragImage); 
    event.dataTransfer.setData("application/x-vnd.adobe.air.file-list", 
                                new Array(dragFile)); 
}

Nota: cuando se llama al método setData() del objeto dataTransfer , el comportamiento predeterminado de arrastrar y colocar no añade datos.