Comentario: llame a PreventDefault () para evitar el procesamiento de datos predeterminado del navegador (el comportamiento predeterminado de los eventos de caída se abre en forma de enlace) y los datos arrastrados se obtienen a través del método DataTransfer.getData (Text). Los amigos interesados pueden referirse a él.
Efecto original
Efecto después de arrastrar
El código es el siguiente
[código]
<! Doctype html>
<html>
<Evista>
<style type = "text/css">
#div1, #div2
{float: izquierda; Ancho: 100px; Altura: 35px; margen: 10px; relleno: 10px; borde: 1px sólido #aaaaaa;}
</style>
<script type = "text/javaScript">
FUNCIÓN DETENDROP (EV)
{
ev.preventDefault ();
}
Función arrastre (EV)
{
ev.datatransfer.setData ("texto", ev.target.id);
}
Drop de funciones (EV)
{
ev.preventDefault ();
var data = ev.datatransfer.getData ("texto");
ev.target.appendChild (document.getElementById (data));
}
</script>
</ablo>
<Body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ondragStart = "drag (event)"/>
<div ondrop = "drop (evento)" ondragover = "tampdop (evento)">
</div>
<div ondrop = "drop (evento)" ondragover = "tampdop (evento)"> </div>
</body>
</html>
[/código]
Puede parecer un poco complicado, pero podemos estudiar las diferentes partes del evento de arrastrar y soltar por separado.
Establecer elementos para arrastrar y soltar
Primero, para que el elemento sea arrastrable, configure la propiedad draggable en verdadero:
<img draggable = "true" />
Qué arrastrar - OndragStart y SetData ()
Luego, especifique lo que sucede cuando se arrastra el elemento.
En el ejemplo anterior, la propiedad OndragStart llama a una función, arrastre (evento), que especifica los datos que se están arrastrando.
El método DataTransfer.SetData () establece el tipo de datos y el valor de los datos arrastrados:
Función arrastre (EV)
{
ev.datatransfer.setData ("texto", ev.target.id);
}
En este ejemplo, el tipo de datos es texto y el valor es la ID del elemento draggable (drag1).
Dónde poner - Ondragover
El evento Ondragover especifica dónde colocar datos arrastrados.
Por defecto, los datos/elementos no se pueden colocar en otros elementos. Si necesita establecer la colocación de Permitir, debemos bloquear el manejo predeterminado de los elementos.
Esto se hace llamando al Método Event.PreventDefault () del evento Ondragover:
event.preventDefault ()
Hacer colocación - Ondrop
Se produce un evento de caída cuando se colocan datos de caída.
En el ejemplo anterior, la propiedad OnDrop llama a una función, Drop (evento):
Drop de funciones (EV)
{
ev.preventDefault ();
var data = ev.datatransfer.getData ("texto");
ev.target.appendChild (document.getElementById (data));
}
Explicación del código:
Llame a PreventDefault () para evitar el procesamiento de datos predeterminado del navegador (el comportamiento predeterminado de los eventos de caída se abre en forma de enlace) para obtener los datos arrastrados a través del método DataTransfer.getData (Text). Este método devuelve cualquier conjunto de datos al mismo tipo en el método setData (). Los datos arrastrados es la ID del elemento arrastrado (Drag1) agrega el elemento arrastrado al elemento de colocación (elemento de destino)