El contenido de este artículo trata sobre cómo implementar la función de arrastre de elementos HTML en HTML5/"> HTML5. Para implementar arrastrar y soltar antes de HTML5, debe usar JS. Ahora HTML5 admite la función de arrastrar y soltar internamente, pero para implementar funciones ligeramente más complejas, JS es indispensable.
1. Crea un objeto de arrastrePodemos decirle al navegador a través del atributo arrastrable qué elementos deben implementar la función de arrastrar y soltar. Draggable tiene tres valores: Verdadero: el elemento se puede arrastrar; falso: el elemento no se puede arrastrar; Auto: el navegador determina si el elemento puede ser arrastrado por sí mismo.
El valor predeterminado del sistema es automático, pero el navegador admite diferentes funciones de arrastre y caída de diferentes elementos en el caso de Auto, como: admite objetos IMG, pero no admite objetos DIV. Entonces, si necesita arrastrar un elemento, es mejor establecer Draggale en True. Veamos un ejemplo a continuación:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
#src> *
{
flotante: izquierda;
}
#Target, #src> img
{
borde: negro delgado sólido;
relleno: 2px;
margen: 4px;
}
#objetivo
{
Altura: 123px;
Ancho: 220px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
#Target> img
{
margen: 1px;
}
</style>
</ablo>
<Body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "objetivo">
<p id = "msg">
Visite aquí </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("objetivo");
</script>
</body>
</html>
Efecto de ejecución:
2. Manejar los eventos de arrastrar y soltarAhora comprendamos los eventos relacionados con el arrastre. Hay dos tipos de eventos, uno es el evento del objeto de arrastre y el otro es el evento del área de caída. Los eventos de arrastre incluyen: DragStart: disparado cuando se inicia el arrastre de elementos; arrastre: activado durante el arrastre de elementos; DRAGEND: activado cuando termina el elemento arrastre. Tomemos un ejemplo a continuación:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
#src> *
{
flotante: izquierda;
}
#Target, #src> img
{
borde: negro delgado sólido;
relleno: 2px;
margen: 4px;
}
#objetivo
{
Altura: 123px;
Ancho: 220px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
#Target> img
{
margen: 1px;
}
img.dragged
{
Color de fondo: naranja;
}
</style>
</ablo>
<Body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "objetivo">
<p id = "msg">
Visite aquí </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("objetivo");
var msg = document.getElementById ("msg");
src.ondragStart = function (e) {
e.target.classList.add ("arrastrado");
}
src.ondragend = function (e) {
e.target.classList.remove ("arrastrado");
msg.innerhtml = "soltar aquí";
}
src.ondrag = function (e) {
msg.innerhtml = e.target.id;
}
</script>
</body>
</html>
Efecto de ejecución:
3. Crea un área de entregaVeamos los eventos relacionados con el área de entrega: Dragenter: activado cuando el objeto de arrastre ingresa al área de entrega; DRAWOVER: activado cuando el objeto de arrastre se mueve en el área de entrega; Dragleeave: el objeto de arrastre no se entrega al área de entrega y se activa cuando sale del área de entrega; Drop: activado cuando el objeto de arrastre se coloca en el área de entrega.
Echemos un vistazo a un ejemplo:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
#src> *
{
flotante: izquierda;
}
#Target, #src> img
{
borde: negro delgado sólido;
relleno: 2px;
margen: 4px;
}
#objetivo
{
Altura: 123px;
Ancho: 220px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
#Target> img
{
margen: 1px;
}
img.dragged
{
Color de fondo: LightGrey;
}
</style>
</ablo>
<Body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "objetivo">
<p id = "msg">
Visite aquí </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("objetivo");
var msg = document.getElementById ("msg");
var draggedId;
Target.ondragenter = HandledRag;
Target.onDragover = HandledRag;
función handledrag (e) {
E.PreventDefault ();
}
Target.ondrop = function (e) {
var newelem = document.getElementById (dragGedId) .clonenode (falso);
Target.innerhtml = "";
Target.appendChild (Newelem);
E.PreventDefault ();
}
src.ondragStart = function (e) {
draggedId = e.target.id;
e.target.classList.add ("arrastrado");
}
src.ondragend = function (e) {
var elems = document.QuerySelectorAll (". Dragged");
para (var i = 0; i <elems.length; i ++) {
elems [i] .classList.remove ("arrastrado");
}
}
</script>
</body>
</html>
Resultados de ejecución:
4. Use DataTransferUtilizamos DataTransfer para pasar datos de los objetos de arrastre al área de entrega. DataTransfer tiene las siguientes propiedades y métodos: Tipos: devuelva el formato de los datos; getData (<Format>): devuelve los datos de formato especificados; setData (<Format>, <s data>): establece los datos de formato especificados; ClearData (<Format>): elimina los datos de formato especificados; Archivos: Devuelve la matriz de archivos que se ha entregado.
Veamos el siguiente ejemplo, el efecto que logró es el mismo que el Ejemplo 3:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
#src> *
{
flotante: izquierda;
}
#src> img
{
borde: negro delgado sólido;
relleno: 2px;
margen: 4px;
}
#objetivo
{
borde: negro delgado sólido;
margen: 4px;
}
#objetivo
{
Altura: 123px;
Ancho: 220px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
img.dragged
{
Color de fondo: naranja;
}
</style>
</ablo>
<Body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "objetivo">
<p id = "msg">
Visite aquí </p>
</div>
</div>
<script>
var src = document.getElementById ("src");
var target = document.getElementById ("objetivo");
Target.ondragenter = HandledRag;
Target.onDragover = HandledRag;
función handledrag (e) {
E.PreventDefault ();
}
Target.ondrop = function (e) {
var droppedId = e.datatransfer.getData ("texto");
var newelem = document.getElementById (droppedId) .clonenode (falso);
Target.innerhtml = "";
Target.appendChild (Newelem);
E.PreventDefault ();
}
src.ondragStart = function (e) {
e.datatransfer.setData ("texto", e.target.id);
e.target.classList.add ("arrastrado");
}
src.ondragend = function (e) {
var elems = document.QuerySelectorAll (". Dragged");
para (var i = 0; i <elems.length; i ++) {
elems [i] .classList.remove ("arrastrado");
}
}
</script>
</body>
</html>
5. Arrastre y suelte el archivoHTML5 admite la API de archivo, que nos permite manipular archivos locales. En general, no usamos la API del archivo directamente. Podemos usarlo en combinación con otras características, como la combinación de efectos de arrastre y caída, como se muestra en el siguiente ejemplo:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
cuerpo> *
{
flotante: izquierda;
}
#objetivo
{
borde: medio doble negro;
margen: 4px;
Altura: 75px;
Ancho: 200px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
mesa
{
margen: 4px;
Colapso de borde: colapso;
}
th, td
{
relleno: 4px;
}
</style>
</ablo>
<Body>
<div id = "objetivo">
<p id = "msg">
Deje caer archivos aquí </p>
</div>
<table id = "datos">
</table>
<script>
var target = document.getElementById ("objetivo");
Target.ondragenter = HandledRag;
Target.onDragover = HandledRag;
función handledrag (e) {
E.PreventDefault ();
}
Target.ondrop = function (e) {
archivos var = e.datatransfer.files;
var tableElem = document.getElementById ("datos");
tableElem.innerhtml = "<tr> <th> name </th> <th> type </th> <th> size </th> </tr>";
for (var i = 0; i <files.length; i ++) {
var fila = "<tr> <td>" + archivos [i] .name + "</td> <td>" + archivos [i] .type + "</td> <td>" + archivos [i] .size + "</td> </tr>";
tableElem.innerhtml += row;
}
E.PreventDefault ();
}
</script>
</body>
</html>
DataTransfer devuelve un objeto Filelist, que podemos tratar como un objeto de matriz de archivo, y el archivo contiene las siguientes propiedades: Nombre: Nombre del archivo; Tipo: Tipo de archivo (Tipo MIME); Tamaño: tamaño de archivo.
Efecto de ejecución:
6. Cargar archivosEl siguiente es un ejemplo de carga de archivos arrastrando y eliminando AJAX.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<estilo>
.mesa
{
Pantalla: tabla;
}
.fila
{
Pantalla: hilera de mesa;
}
.celúla
{
Display: Cel-Cell;
relleno: 5px;
}
.etiqueta
{
Text-Align: Right;
}
#objetivo
{
borde: medio doble negro;
margen: 4px;
Altura: 50px;
Ancho: 200px;
Text-Align: Center;
Pantalla: tabla;
}
#Target> P
{
Display: Cel-Cell;
Align vertical: medio;
}
</style>
</ablo>
<Body>
<Form ID = "Fruitform" Method = "Post" Action = "/uploadHandler.ashx">
<div>
<div>
<div>
Plátanos: </div>
<div>
<input name = "bananas" valor = "2" /> </div>
</div>
<div>
<div>
Manzanas: </div>
<div>
<input name = "Apples" value = "5" /> </div>
</div>
<div>
<div>
Cerezas: </div>
<div>
<input name = "cerezas" valor = "20" /> </div>
</div>
<div>
<div>
Archivo: </div>
<div>
<input type = "file" name = "file" /> </div>
</div>
<div>
<div>
Total: </div>
<div id = "resultados">
Artículos </div>
</div>
</div>
<div id = "objetivo">
<p id = "msg">
Deje caer archivos aquí </p>
</div>
<botón id = "enviar" type = "enviar">
Envíe el formulario </boton>
</form>
<script type = "text/javaScript">
var target = document.getElementById ("objetivo");
var httprequest;
var filelist;
Target.ondragenter = HandledRag;
Target.onDragover = HandledRag;
función handledrag (e) {
E.PreventDefault ();
}
Target.ondrop = function (e) {
filelista = e.datatransfer.files;
E.PreventDefault ();
}
document.getElementById ("enviar"). onClick = function maneButtonPress (e) {
E.PreventDefault ();
var form = document.getElementById ("fruitform");
var FormData = new FormData (Form);
if (filelist) {
para (var i = 0; i <filelist.length; i ++) {
formdata.append ("archivo" + i, filelist [i]);
}
}
httprequest = new xmlhttprequest ();
httprequest.OnreadyStateChange = HandlerEponse;
httprequest.open ("post", form.action);
httprequest.send (FormData);
}
funciones handleresponse () {
if (httprequest.readystate == 4 && httprequest.status == 200) {
var data = json.parse (httprequest.esponsetext);
document.getElementById ("Resultados"). InnerHtml = "usted ordenó" + data.total + "elementos";
}
}
</script>
</body>
</html>
Efecto:
Algunos de los ejemplos anteriores pueden tener diferentes efectos de ejecución de navegadores. Estoy usando un navegador Chrome. A excepción de los ejemplos 5 y 6 que no admiten múltiples archivos, otros ejemplos se ejecutan normalmente. Puedes descargar la demostración.
Dirección de descarga de demostración: html5guide.draggable.rar