HTML5 arrastre y suelte la API para implementar el código de ejemplo para la clasificación de arrastrar y soltar

HTML5 proporciona una API Direct Drag -and -drop, que es muy conveniente para lograr el efecto de arrastrar y soltar. Para lograr varias funciones de arrastrar y soltar.

Si desea arrastrar y soltar un cierto elemento, debe establecer la propiedad de arrastre del elemento en verdad. Los elementos IMG y los elementos se establecen con atributos arrastrables a True, que se pueden arrastrar y soltar directamente.

Los incidentes de arrastrar y soltar son generados por diferentes elementos. Un elemento se arrastra y se deja caer, y eventualmente puede llegar al elemento que quiere colocar en muchos elementos. Aquí, me refiero temporalmente al elemento del arrastre y la caída y el elemento del proceso, y el elemento que alcancé se llama objeto objetivo. Diferentes objetos tienen diferentes eventos de arrastre y caída.

Objeto de origen:

1. Dragstart: el objeto de origen comienza a arrastrar y soltar.
2. Drag: Durante el arrastre y la caída del objeto de origen.
3. DRAGEND: el objeto de origen arrastra y cae.

Objeto de proceso:

1. Dragenter: los objetos de origen comienzan a ingresar al rango del proceso.
2. DRAWOVER: el objeto de origen se mueve dentro del rango del proceso.
3. Dragleeave: el alcance del objeto de la fuente que sale del proceso.

Objeto objetivo:

1. Drop: el objeto de origen se arrastra y se deja caer en el objeto de destino.

 <div id = fuente draggable = true> un elemento </div> <div id = proceso> b elemento </div> <div id = target> c elemento </div> <script> var source = document.getElementById '( 'Fuente'), // un elemento proces = document.getElementById ('Process'), // b Elemento Target = Document.GelementById ('Target'); Los eventos de DragStart son generados por el elemento A para generar console.log ('un elemento comienza a ser arrastrado');}, falso) proces.addeventRistener ('dragner', function (ev) {// dragenter el evento es generado por el b elemento. , False) Target.AdDeventListener ('drop', function (ev) {// drop Event es generado por console.log ('a un elemento a c elemento');) document.ondragover = function (e) {e.preventDefault ( );} </script>

Se proporciona un objeto de transmisión de datos DataTransfer en todos los eventos Drag -and -drop para pasar datos entre objetos de origen y objetos de destino. A continuación, conozca los métodos y atributos de este objeto para comprender cómo transmite datos.

Este método se almacena en el objeto DataTransfer. Reciba dos parámetros, el primero indica una cadena para almacenar el tipo de datos y ahora admite lo siguiente:

1. texto/simple: texto de texto.
2. texto/html: html text.
3. Texto/XML: XML Texto.
4. Texto/Lista URI: Lista de URL, cada URL es una línea.

El segundo parámetro son los datos a almacenar. Por ejemplo:

 event.datatransfer.setData ('Text/Plain', 'Hello World');

Este método lee datos del objeto DataTransfer. El parámetro es el tipo de datos especificados en SetData. Por ejemplo:

 event.datatransfer.getData ('text/sencillo');

Este método elimina los datos almacenados en el objeto DataTransfer. Los parámetros son opcionales, para los tipos de datos. Si los parámetros están vacíos, borre todos los tipos de datos. Por ejemplo:

 event.datatransfer.clearData ();

Este método está configurado para arrastrar y soltar iconos utilizando elementos IMG. Reciba los tres parámetros, el primero es el elemento icono, el segundo es el desplazamiento del eje x del elemento icono del puntero del mouse, y el tercero es el desplazamiento del eje y del elemento icono del puntero del mouse. Por ejemplo:

 VAR Source = document.getElementById ('fuente'), icon = document.createElement ('img'); 10, -10)}, falso)

Estos dos atributos se combinan para establecer el efecto visual de arrastrar y soltar.

Vale la pena señalar que IE no admite el objeto DataTransfer. Sí, no importa qué versión de IE sea compatible.

El uso de API de arrastre y caída ya está familiarizado con lo anterior. Echemos un vistazo a la idea primero:

1. En una lista, cada elemento se puede arrastrar y soltar, y la propiedad arrastrable se establece en True para cada elemento.
2. Encuestando el evento DragStart de cada elemento para distinguir el estilo del objeto de origen.
3. Al monitorear el evento Dragenter de cada elemento, cuando el objeto de origen ingresa al elemento actual, el objeto de origen se agrega antes del elemento. De esta manera, los elementos detrás de él serán exprimidos por el objeto fuente, logrando el efecto de clasificación.
4. Sin embargo, se encontrará que el objeto de origen no se puede clasificar hasta el último, y solo puede ser el segundo en el penúltimo. En este momento, se monitorea el evento Dragleave.

El código principal es el siguiente:

 var source = document.queryselectiverall ('. List'), dragelement = null; ) {dragelement = this;}, falso); [i] .adDeventListener ('dragleeave', function (ev) {if (dragelement! = this) {if (this == this.parentnode.lastelementchild || this.parentnod e.lastchild) {this.parentnode.appendChild (dragelement );}}, falso)};

Dirección del código completo: Drag-Demo

Es principalmente compatible en IE, pero al menos se puede arrastrar y clasificar en al menos en IE10.

Y en mi simple prueba, se encuentra que cuando los elementos no están configurados en IE, el evento Dragleave no se activará.

El punto más importante es en iOS y Android, que es completamente incompatible. Afortunadamente, hay un plug -in para que sea perfectamente compatible en el extremo móvil.

Dirección de complemento: iOS-HTML5-Drag-Drop-Shim

Solo necesita introducir el complemento en el código original para arrastrarlo en la terminal móvil.

 <script> var iosdragDropShim = {EnlenerLave: true} </script> <script src = vendor/iOS-drop.js> </script>

Lo anterior es todo el contenido de este artículo.