Arrastrar y soltar en HTML - Ejemplo para realizar arrastrar y soltar en HTML

• Introducción a arrastrar y soltar en HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Introducción a arrastrar y soltar en HTML

Arrastrar y soltar son ahora una de las últimas funciones incluidas en HTML. Arrastrar y soltar es un proceso que comienza cuando el usuario elige un elemento que se puede arrastrar y coloca este elemento en el componente soltable y lo coloca en la ubicación especificada. Utiliza el modelo de evento Modelo de objeto de documento (DOM), así como algunos eventos de arrastre que provienen de eventos del mouse. Funciona como la interfaz más poderosa que se encarga de copiar, grabar y eliminar elementos utilizando un mouse. En el último HTML, la funcionalidad Arrastrar y soltar funciona en los últimos eventos como dragstart, dragend y muchos otros eventos que se utilizarán.

Eventos para arrastrar y soltar

Hay varios eventos incluidos en la última funcionalidad de arrastrar y soltar (dnd), veamos uno por uno de la siguiente manera:

Veamos algunos atributos de datos en los que sucederá la operación de arrastrar y soltar:

1. dataTransfer.dropEffect (= valor): este atributo se utiliza para mostrar qué operación se está llevando a cabo actualmente. se puede configurar para reemplazar la operación ya seleccionada. Los valores incluidos en él como una copia, enlace, ninguno o movimiento.

2. dataTransfer.effectAllowed (= valor): Cualesquiera operaciones permitidas que se devolverán a través de este atributo. También es posible configurar, para cambiar la operación ya seleccionada.

3. dataTransfer.files: este atributo de datos utilizado para obtener la lista de archivos de los archivos que se van a arrastrar.

4. dataTransfer.addElement (elemento): se utiliza para insertar el elemento ya existente en una lista de otros elementos que son útiles para representar la retroalimentación de arrastre.

5. dataTransfer.setDragImage (elemento, x, y): este atributo es un poco el mismo que el anterior para actualizar los comentarios de arrastre y ayudar a cambiar los comentarios ya existentes

6. dataTransfer.clearData ((formato)): ayuda al usuario a eliminar datos del formato ya definido. Si el usuario omitió el argumento, el IT eliminará todos los datos.

7. dataTransfer.setData (formato, datos): es uno de los atributos populares utilizados para agregar datos específicos.

8. data = dataTransfer.getData (formato): este atributo en la operación Arrastrar y arrastrar se usa para extraer datos específicos. En caso de que no haya los mismos datos, volverá a la cadena vacía

Sintaxis de arrastrar y soltar en HTML

Aquí hay algunos pasos que definen la sintaxis para arrastrar y soltar:

Seleccione el objeto para ser un arrastre: establezca el atributo fiel a él.

Comience a arrastrar el objeto:

function dragStart(ev)()

Suelta el objeto:

function dragDrop(ev)()

Ejemplos de arrastrar y soltar en HTML

El siguiente ejemplo mostrará cómo funcionará exactamente la operación de arrastrar y soltar en HTML:

Ejemplo 1

Código:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Salida: antes de la opción de arrastrar y soltar, la salida será como se muestra a continuación:

Después de realizar la operación de arrastrar y soltar, la salida será como:

Ejemplo # 2

Aquí vamos a ver otro ejemplo en el que moveremos la imagen de una ubicación a otra ubicación especificada como se muestra a continuación en el código:

Código:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Demo de arrastrar y soltar imagen