unslug es: move

3 files changed, 318 insertions, 0 deletions

diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
new file mode 100644
index 0000000000..1225072b01
--- /dev/null
+++ b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
@@ -0,0 +1,117 @@
+---
+title: Drag & Drop archivo
+slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo
+tags:
+  - Guía
+  - arrastra y suelta
+  - drag and drop
+  - drop zone
+  - zona de arrastre
+translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el <em>explorador de archivos </em>de la plataforma y soltados en una página web.</p>
+
+<p>Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (<em>drop zone), </em>es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">repositorio drag-and-drop de MDN</a> (cualquier sugerencia o  tema que revisar es bienvenido).</p>
+
+<p class="note">Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).</p>
+
+<h2 id="Define_la_zona_drop_drop_zone">Define la zona "drop" [drop <em>zone</em>]</h2>
+
+<p>Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:</p>
+
+<pre class="brush: html notranslate">&lt;div id="drop_zone" ondrop="dropHandler(event);"&gt;
+  &lt;p&gt;Arrastra y suelta uno o más archivos a esta zona ...&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:</p>
+
+<pre class="brush: html notranslate">&lt;div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"&gt;
+  &lt;p&gt;Arrastra y suelta uno o más archivos a esta zona ...&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:</p>
+
+<pre class="brush: css notranslate">#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+</pre>
+
+<div class="note">
+<p>Fíjese que los eventos <code>dragstart</code> y <code>dragend</code> no son activados cuando se arrastra un archivo al browser desde el SO.</p>
+</div>
+
+<h2 id="Procesar_la_acción_de_soltar_drop">Procesar la acción de soltar [drop]</h2>
+
+<p>El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.</p>
+
+<p>El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación <em>real</em>, se querrá procesar un archivo usando {{domxref("File","File API")}}.</p>
+
+<p>Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.</p>
+
+<pre class="brush: js notranslate">function dropHandler(ev) {
+  console.log('Fichero(s) arrastrados');
+
+  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
+    for (var i = 0; i &lt; ev.dataTransfer.items.length; i++) {
+      // Si los elementos arrastrados no son ficheros, rechazarlos
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Usar la interfaz DataTransfer para acceder a el/los archivos
+    for (var i = 0; i &lt; ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+
+  // Pasar el evento a removeDragData para limpiar
+  removeDragData(ev)
+}</pre>
+
+<h2 id="Prevenir_el_comportamiento_default_de_arrastrado_en_el_browser">Prevenir el comportamiento default de arrastrado en el browser </h2>
+
+<p>El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.</p>
+
+<pre class="brush: js notranslate">function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Limpieza_Cleanup">Limpieza (Cleanup)</h2>
+
+<p>Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.</p>
+
+<pre class="brush: js notranslate">function removeDragData(ev) {
+  console.log('Removing drag data')
+
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to remove the drag data
+    ev.dataTransfer.items.clear();
+  } else {
+    // Use DataTransfer interface to remove the drag data
+    ev.dataTransfer.clearData();
+  }
+}
+</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/es/web/api/html_drag_and_drop_api/index.html b/files/es/web/api/html_drag_and_drop_api/index.html
new file mode 100644
index 0000000000..82e069ed48
--- /dev/null
+++ b/files/es/web/api/html_drag_and_drop_api/index.html
@@ -0,0 +1,57 @@
+---
+title: Arrastrar y soltar
+slug: DragDrop/Drag_and_Drop
+tags:
+  - HTML5
+  - XUL
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.</p>
+<div class="note"> Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la <a href="/en-US/docs/Drag_and_Drop" title="/en-US/docs/Drag_and_Drop">documentación de la API anterior</a> para Firefox 3.0 y versiones anteriores.</div>
+
+
+<h2 id="Elementos_básicos_de_arrastrar_y_soltar">Elementos básicos de arrastrar y soltar</h2>
+<p>Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:</p>
+<ul>
+	<li>los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragdata" title="/en-US/docs/DragDrop/Drag_Operations#dragdata">Datos de la operación de arrastre</a> .</li>
+	<li>la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="/en-US/docs/DragDrop/Drag_Operations#dragfeedback">Configurar la imagen de confirmación sobre la operación de descarga</a> .</li>
+	<li>efectos de arrastre que se permiten. Son posibles tres efectos: <code>copy</code> para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, <code>move</code> para indicar que los datos que se arrastran serán movidos y <code>link</code> para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#drageffects" title="/en-US/docs/DragDrop/Drag_Operations#drageffects">Efectos de arrastre</a> para obtener más detalles.</li>
+</ul>
+<p>Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Arrastrar y soltar múltiples elementos</a> .</p>
+<p>Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Tipos de operaciones de arrastre recomendados</a>.</p>
+<p>Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:</p>
+<ul>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="/en-US/docs/DragDrop/Recommended_Drag_Types#text">Texto</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="/en-US/docs/DragDrop/Recommended_Drag_Types#link">Enlaces</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="/en-US/docs/DragDrop/Recommended_Drag_Types#html">HTML y XML</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="/en-US/docs/DragDrop/Recommended_Drag_Types#file">Archivos</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="/en-US/docs/DragDrop/Recommended_Drag_Types#image">Imágenes</a></li>
+	<li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="/en-US/docs/DragDrop/Recommended_Drag_Types#node">Nodos de documento</a></li>
+</ul>
+<p>Consulta <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">DataTransfer</a> para tener una referencia al objeto DataTransfer.</p>
+
+
+<h2 id="events" name="events">Eventos de arrastre</h2>
+<p>Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como <code>mousemove</code> no se ejecutan durante una operación de arrastre.</p>
+<p>La propiedad <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">dataTransfer</a> de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.</p>
+
+
+<dl>
+	<dt>dragstart</dt>
+	<dd>Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="/en-US/docs/DragDrop/Drag_Operations#dragstart">Inicio de una operación de arrastre</a> .</dd>
+	<dt>dragenter</dt>
+	<dd>Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a> .</dd>
+	<dt>dragover</dt>
+	<dd>Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a>.</dd>
+	<dt>dragleave</dt>
+	<dd>Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.</dd>
+	<dt>drag</dt>
+	<dd>Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.</dd>
+	<dt>drop</dt>
+	<dd>El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="/en-US/docs/DragDrop/Drag_Operations#drop">Realizar una operación de colocación</a>.</dd>
+	<dt>dragend</dt>
+	<dd>El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="/en-US/docs/DragDrop/Drag_Operations#dragend">Finalizar una operación de arrastre</a> si deseas más información.</dd>
+</dl>
+
+
+<div>{{ HTML5ArticleTOC () }}</div>
diff --git a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html
new file mode 100644
index 0000000000..daad516a44
--- /dev/null
+++ b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html
@@ -0,0 +1,144 @@
+---
+title: Tipos de Drag recomendados
+slug: DragDrop/Recommended_Drag_Types
+translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types
+---
+<p>A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.</p>
+<h2 id="text" name="text">Arrastramdo Texto</h2>
+<p>Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:</p>
+<pre>event.dataTransfer.setData("text/plain", "This is text to drag")
+</pre>
+<p>Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.</p>
+<p><span style="line-height: 1.5;">Se recomienda que siempre se agrega datos del tipo  </span><code style="font-size: 14px;">text/plain</code><span style="line-height: 1.5;">  </span><span style="line-height: 1.5;">como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.</span></p>
+<p><span style="line-height: 1.5;">En códigos más viejo, encontrara </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/unicode o </span>el tipo<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">Text.</span><span style="line-height: 1.5;">Estos equivalen </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain,</span><span style="line-height: 1.5;">que </span><span style="line-height: 1.5;">guardara y recibia los datos del texto plano en ese lugar</span><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">.</span></font></p>
+<h2 id="link" name="link">Arrastrando Enlaces</h2>
+<p>Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/uri-list,</span><span style="line-height: 1.5;">y el segundo es URL utilizando el tipo </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain. </span><span style="line-height: 1.5;">Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:</span></p>
+<pre>var dt = event.dataTransfer;
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+<p>Es constumbre, establecer el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain de ultimo, </span><span style="line-height: 1.5;">, ya que es menos específico que el tipo de URI.</span></p>
+<p>Note que el tipo de URL <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">uri-list </span><span style="line-height: 1.5;">es con una "i", no una "L"</span></p>
+<p><span style="line-height: 1.5;">Note that the URL type is </span><code style="font-size: 14px;">uri-list</code><span style="line-height: 1.5;"> with an 'I', not with an 'L'.</span></p>
+<p>To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The <code>text/plain</code> version of the drag data should include all links but should not include the comments.</p>
+<p>For example:</p>
+<pre>http://www.mozilla.org
+#A second link
+http://www.xulplanet.com
+</pre>
+<p>This sample <code>text/uri-list</code> data contains two links and a comment.</p>
+<p>When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type <code>URL</code> may be used to refer to the first valid link within the data for the <code>text/uri-list</code> type. You should not add data using the <code>URL</code> type; attempting to do so will just set the value of the <code>text/uri-list</code> type instead.</p>
+<pre>var url = event.dataTransfer.getData("URL");
+</pre>
+<p>You may also see data using the <code>text/x-moz-url</code> type which is a Mozilla specific type. If it appears, it should be used before the <code>text/uri-list</code> type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:</p>
+<pre>http://www.mozilla.org
+Mozilla
+http://www.xulplanet.com
+XUL Planet
+</pre>
+<h2 id="html" name="html">Dragging HTML and XML</h2>
+<p>HTML content may use the <code>text/html</code> type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the <code>innerHTML</code> property of an element.</p>
+<p>XML content may use the <code>text/xml</code> type, but you should ensure that the data value is well-formed XML.</p>
+<p>You may also include a plain text representation of the HTML or XML data using the <code>text/plain</code> type. The data should be just the text and should not include any of the source tags or attributes. For instance:</p>
+<pre>var dt = event.dataTransfer;
+dt.setData("text/html", "Hello there, &lt;strong&gt;stranger&lt;/strong&gt;");
+dt.setData("text/plain", "Hello there, stranger");
+</pre>
+<h2 id="file" name="file">Dragging Files</h2>
+<p>A local file is dragged using the <code>application/x-moz-file</code> type with a data value that is an <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the <a href="/En/DragDrop/DataTransfer#mozSetDataAt.28.29" title="mozSetDataAt">mozSetDataAt</a> method to assign the data. Similarly, when retrieving the data, you must use the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method.</p>
+<pre>event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+</pre>
+<p>If possible, you may also include the file URL of the file using both the <code>text/uri-list</code> and/or <code>text/plain</code> types. These types should be added last so that the more specific <code>application/x-moz-file</code> type has higher priority.</p>
+<p>Multiple files will be received during a drop as mutliple items in the data transfer. See <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a> for more details about this.</p>
+<p>The following example shows how to create an area for receiving dropped files:</p>
+<pre>&lt;listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/&gt;
+
+&lt;script&gt;
+function checkDrag(event)
+{
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event)
+{
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile)
+    event.currentTarget.appendItem(file.leafName);
+}
+&lt;/script&gt;
+</pre>
+<p>In this example, the event returns false only if the data transfer contains the <code>application/x-moz-file</code> type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the <code>instanceof</code> operator is used here as the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method will return an <code>nsISupports</code> that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.</p>
+<h2 id="image" name="image">Dragging Images</h2>
+<p>Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the <code>text/uri-list</code> type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see <a class="internal" href="/en/data_URIs" title="en/The data URL scheme">the data URL scheme</a>.</p>
+<p>As with other links, the data for the <code>text/plain</code> type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the <code>text/plain</code> data in this situation.</p>
+<p>In chrome or other privileged code, you may also use the <code>image/jpeg</code>, <code>image/png</code> or <code>image/gif</code> types, depending on the type of image. The data should be an object which implements the <a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.</p>
+<p>You should also include the <code>application/x-moz-file</code> type if the image is located on disk. In fact, this a common way in which image files are dragged.</p>
+<p>It is important to set the data in the right order, from most specific to least specific. The image type such as <code>image/jpeg</code> should come first, followed by the <code>application/x-moz-file</code> type. Next, you should set the <code>text/uri-list</code> data and finally the <code>text/plain</code> data. For example:</p>
+<pre>var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+</pre>
+<p>Note that the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.</p>
+<h2 id="node" name="node">Dragging Nodes</h2>
+<p>Nodes and elements in a document may be dragged using the <code>application/x-moz-node</code> type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.</p>
+<p>You should always include a plain text alternative for the node.</p>
+<h2 id="custom" name="custom">Dragging Custom Data</h2>
+<p>You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.</p>
+<h2 id="filestoos" name="filestoos">Dragging files to an operating system folder</h2>
+<p>There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:</p>
+<pre class="brush: js">// currentEvent is a given existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
+       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself...
+    }
+  }
+}
+</pre>
+<p>{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}</p>