Drag/Drop es una característica muy común. Puede tomar un objeto y arrastrarlo al área que desea colocar. Muchos Javascripts implementan funciones relacionadas de manera similar, como el componente DragandDrop de jQueryui. En HTML5, Drag Drop se convierte en la operación estándar y cualquier elemento lo admite. Debido a que esta función es tan común, todos los navegadores convencionales admiten esta operación.
Habilitar propiedades de arrastre de arrastreEs muy simple. Simplemente modifique el atributo de arrastre de un elemento a arrastre, y este elemento admite arrastre, como se muestra a continuación:
<imgdraggable = "true"/>
Pasar datos mientras arrastraDurante el proceso de arrastre, a menudo necesitamos pasar los datos lógicos correspondientes para completar el proceso de conversión. Aquí utilizamos principalmente el objeto DataTransfer para la transferencia de datos. Echemos un vistazo a sus miembros primero:
Miembros del método:
setData (formato, datos): asigne los datos arrastrados al objeto DataTransfer.
Formato: un parámetro de cadena que especifica el tipo de datos que se están arrastrando. Los valores de este parámetro pueden ser texto (tipo de texto) y URL (tipo URL). Este parámetro es independiente del caso, por lo que el texto es el mismo que el texto.
Datos: un parámetro de tipo variante que especifica los datos que se están arrastrando. Los datos pueden ser texto, ruta de imagen, URL, etc.
Esta función tiene un valor de retorno del tipo booleano. Verdadero significa que los datos se agregan con éxito al DataTransfer, y falso significa que no tiene éxito. Si es necesario, este parámetro se puede usar para decidir si se debe continuar alguna lógica.
getData (formato): obtenga los datos de arrastre almacenados en DataTransfer.
El formato significa lo mismo que en SetData, y los valores pueden ser Text (Tipo de texto) y URL (Tipo de URL).
ClearData (formato): elimina los datos del tipo especificado.
Además del texto (tipo de texto) y la URL (tipo URL) que se puede especificar anteriormente, el formato aquí también puede tomar los siguientes valores: archivo de archivo, elemento html-html, imagen de imagen.
Este método se puede utilizar para procesar selectivamente los tipos de datos arrastrados.
Miembros del atributo :EffectLowed: establece o obtiene la operación de que los datos en el elemento de origen de datos pueden realizar.
El tipo de atributo es una cadena, y el rango de valor es el siguiente:
datos de copia de copia.
Datos de enlace de enlace.
MOVER DATOS MOBILE
Copylink: copia o datos de enlace, determinados por el objeto de destino.
CopyMove: copie o mueva datos, determinados por el objeto de destino.
LinkMove: enlace o mueva datos, determinados por el objeto de destino.
All-All Operations son compatibles.
Sin embargo, está prohibido.
Uninicializado: valor predeterminado, adopta un comportamiento predeterminado.
Tenga en cuenta que después de establecer efectivo a ninguno, el arrastre está prohibido, pero la forma del mouse aún muestra la forma de un objeto que no se puede arrastrar. Si no desea mostrar esta forma del mouse, debe establecer el Valor de retorno de la propiedad del evento del evento de la ventana a False.
DROPEFECT: conjuntos o se permiten operaciones en el objetivo arrastrado y la forma del mouse asociado.
El tipo de atributo es una cadena, y el rango de valor es el siguiente :copia-la forma del mouse cuando aparece como copia;
Link: el mouse se muestra como la forma de la conexión;
Mover: el mouse aparece como una forma móvil.
Ninguno (predeterminado): el mouse aparece como una forma sin arrastrar.
EffectIlowed especifica las operaciones compatibles con la fuente de datos, por lo que generalmente se especifica en el evento OndragStart. Dropeffect especifica las acciones compatibles con el arrastre del objetivo, por lo que generalmente se usa en eventos como Ondragenter, Ondragover y Ondrop en el objetivo arrastrado.
Archivos: Devuelve la lista de archivos arrastrados filelist.
Tipos: una lista de tipos de datos enviados en OndragStart (DAT DATA).
La existencia de un objeto DataTransfer permite pasar datos lógicos entre la fuente de datos arrastrada y el elemento de destino. Por lo general, usamos el método SetData para proporcionar datos en el evento OndragStart del elemento de origen de datos, y luego en el elemento de destino, utilizamos el método GetData para obtener datos.
Eventos activados durante el arrastreEl siguiente es el evento que ocurrirá al arrastrar y soltar. Básicamente, el orden de activación de los eventos es el siguiente orden:
Dragstart: activado cuando el elemento a arrastrar comienza a arrastrarse. Este objeto de evento es el elemento arrastrado.
Drag: activado Al arrastrar un elemento, este objeto de evento es el elemento arrastrado.
Dragenter: activado al arrastrar un elemento al elemento de destino. Este objeto de evento es el elemento de destino.
DRAWOVER: activado al arrastrar un elemento para moverse en el elemento de destino. Este objeto de evento es el elemento de destino.
dragleeave: activado al arrastrar un elemento lejos del elemento de destino. Este objeto de evento es el elemento de destino.
Drop: activado cuando el elemento arrastrado se coloca en el elemento de destino. Este objeto de evento es el elemento de destino.
DRAGEND: activado después de la caída, que se activa cuando se completa el arrastre. Este objeto de evento es un elemento arrastrado.
Básicamente, el evento de parámetros del evento pasará en elementos relacionados, que se pueden modificar fácilmente. Aquí, no necesitamos manejar cada evento, generalmente solo necesitamos conectar algunos eventos principales.
Evento de arrastreLos parámetros pasados de este evento contienen mucha información, y puede obtener fácilmente los elementos arrastrados (Event.Target); puede establecer los datos arrastrados (event.datatransfer.setData); Por lo tanto, puede implementar fácilmente la lógica detrás del arrastre (por supuesto, también puede pasar otros parámetros cuando se une).
Durante los eventos de Dragging - Ondrag, Ondragover, Ondragenter y Ondragleave El objeto del evento Ondrag es un elemento de arrastre, y este evento generalmente se maneja con menos frecuencia. El evento Ondragenter ocurre al arrastrar al elemento actual, el evento Ondragleave ocurre al arrastrar del elemento actual y el evento Ondragover se produce al arrastrar los movimientos en el elemento actual.Solo una cosa a tener en cuenta aquí es que de manera predeterminada, el navegador prohíbe la caída de elementos, por lo que para que los elementos caigan, debe devolver falso en esta función o llamar al método Event.PreventDefault (). Como se muestra en el siguiente ejemplo.
Drag End - Ondrop, evento OndragendCuando se reducen los datos arrastrables, se activa el evento de caída. Después de que finaliza la caída, el evento Dragarend se activa y este evento se usa relativamente menos.
Echemos un vistazo a un ejemplo simple:
<! Doctypehtml>
<html>
<Evista>
<scriptType = "text/javaScript">
FunctionAllowDrop (EV) {
ev.preventDefault ();
}
functionDrag (eV) {
ev.datatransfer.setData ("texto", ev.target.id);
}
functionDrop (ev) {
vardata = ev.datatransfer.getData ("texto");
ev.target.appendChild (document.getElementById (data));
ev.preventDefault ();
}
</script>
</ablo>
<Body>
<divid = "div1" ondrop = "drop (event)" ondragover = "tampdop (evento)"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragStart = "drag (event)" width = "336" altura = "69"/>
</body>
</html>
Arrastre y arrastre el archivoEl ejemplo anterior ha utilizado varios métodos y propiedades de DataTransfer. Echemos un vistazo a otra aplicación interesante en Internet: arrastre y deje caer una imagen en la página web y luego mostrársela en la página web. Esta aplicación utiliza la propiedad de archivos de DataTransfer.
<! Doctypehtml>
<html>
<Evista>
<metacharset = "utf-8">
<title> html5 arrastre y suelte archivo </title>
<estilo>
#section {Font-Family: "Georgia", "Microsoft Yahei", "Canción china";}
.Container {Display: Inline-Block; Min-Height: 200px; min-width: 360px; color:#f30; padding: 30px; borde: 3pxsolid#ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.preview {max-width: 360px;}
#files-list {posición: absoluto; arriba: 0; izquierda: 500px;}
#list {ancho: 460px;}
#list.preview {max-width: 250px;}
#listp {Color:#888; Font-Size: 12px;}
#list.green {color:#09c;}
</style>
</ablo>
<Body>
<divid = "sección">
<p> Arrastre su imagen al contenedor a continuación: </p>
<divid = "contenedor" class = "contenedor">
</div>
<divid = "files-list">
<p> Archivos que se han arrastrado en: </p>
<ulid = "list"> </ul>
</div>
</div>
<script>
if (window.filereader) {
varlist = document.getElementById ('list'),
cnt = document.getElementById ('contenedor');
// juzga si la imagen es
functionEsImage (type) {
Switch (tipo) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
returnTrue;
por defecto:
returnfalse;
}
}
// manejar la lista de archivos de arrastrar y soltar
functionHandleFilesElect (EVT) {
evt.stoppropagation ();
evt.preventDefault ();
varfiles = evt.datatransfer.files;
for (vari = 0, f; f = archivos [i]; i ++) {
vart = F.Type? F.Type: 'n/a',
lector = newFilereader (),
apariencia = function (f, img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
isimg = isImage (t),
img;
// procesando las imágenes obtenidas
if (isimg) {
Reader.Onload = (function (theFile) {
returnfunction (e) {
img = '<imgClass = "Preview" src = "'+e.target.result+'" title = "'+theFile.name+'"/>';
mira (thheil, img);
};
})(F)
lector.readasdataurl (f);
}demás{
img = '"o ((> ω <)) o", ¡lo que enviaste no es una imagen! ! ';
mira (f, img);
}
}
}
// manejar el efecto de inserción y arrastre
FunctionHandledRageNer (EVT) {this.setTribute ('style', 'Border-style: Danked;');}
FunctionHandledRagleAve (EVT) {this.setAttribute ('style', '');}
// manejar eventos de arrastre de archivos para evitar la redirección causada por eventos predeterminados del navegador
functionHandledRagover (EVT) {
evt.stoppropagation ();
evt.preventDefault ();
}
cnt.addeventListener ('dragenter', handledragenter, falso);
cnt.addeventListener ('dragover', handledragover, falso);
cnt.addeventListener ('drop', manefileselect, falso);
cnt.addeventListener ('dragleeave', handledRagleave, falso);
}demás{
document.getElementById ('section'). innerhtml = 'Su navegador no lo admite, classmate';
}
</script>
</body>
</html>
En este ejemplo, se usa la API de lectura de archivos en HTML5: el objeto FileReader; Este objeto proporciona el siguiente método asincrónico para leer archivos:
1.Filereader.ReadAsBinaryString (FileBlob)
Lea el archivo en modo binario, el atributo de resultado contendrá el formato binario de un archivo
2.filereader.readastext (fileBlob, opt_encoding)
Lea el archivo en modo de texto. El atributo de resultado contendrá el formato de texto de un archivo. El parámetro de decodificación predeterminado es UTF-8.
3.filereader.readasdataurl (archivo)
Leer el resultado del archivo en el formulario de URL contendrá el formato DataRURL de un archivo (las imágenes generalmente son de esta manera).
Cuando se lee el archivo utilizando el método anterior, los siguientes eventos se activarán:
OnloadStart, OnProgress, Onabort, OnError, Onload, Onloadend
Estos eventos son muy simples, solo conecten cuando sea necesario. Consulte el siguiente ejemplo del código:
functionstartread () {
// obtener información
varfile = document.getElementById ('file'). archivos [0];
if (file) {
getastext (archivo);
}
}
functetgetEtext (readFile) {
vraader = newFilerader ();
// readFileIntomoryAsutf-16
lector.readastext (readFile, "UTF-16");
// HandleProgress, Success, Anderrors
lector.onProgress = updateProgress;
lector.onload = cargado;
lector.oNerror = ErrgeHandler;
}
functionUpdateProgress (EVT) {
if (evt.lengthComputable) {
//evt.loadedandevt.totalarProgressEventProperties
varloaded = (evt.loaded/evt.total);
if (cargado <1) {
// cada vez más
//style.width=(LOADED*200)+"PX ";
}
}
}
functionloaded (evt) {
// ObtenerThereadFileData
varfilestring = evt.target.result;
// Handleutf-16 Filedump
if (utils.regexp.ischinese (fileString)) {
// chineseCharacter+nameValidation
}
demás{
// RunotherCharsetTetest
}
//xhr.send(filestring)
}
functionErrorHandler (EVT) {
if (evt.target.error.name == "NotreadableErr") {
// El archivo pudo no esbubrar
}
}
Permítanme hablar brevemente aquí: la descarga de archivos ordinarios usa el método Window.open, por ejemplo:
Window.open ('http://aaa.bbbb.com/ccc.rar','_blank')
Referencia práctica: Documento oficial: http://www.w3schools.com/html5/Un buen sitio web de tutorial: http://html5.phphube.com/html5/features/drapanddrop/
Ayuda de MSDN: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
Descripción detallada de la arrastre y caída del archivo: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Arrastre y cargue el archivo: http://www.chinaz.com/design/2010/0909/131984.shtml
Ejemplo completo de la carga de arrastre y suelto de archivo: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
Ejemplo de descarga de archivos: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open Guide: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
Window.open Parameter: http://www.koyoz.com/blog/?action=show&id=176