12/12/2015 html 6m 16s 1 8581 5
¿Cuanta importancia tiene el orden de los atributos en el código HTML? Algunos desarrolladores web le damos más y otros menos, todo depende...
Drag & Drop Arrastrar y soltar en Html5
26 de /agosto08 de /2014
4m 28s
html
1 comentario
6995
5
Como mover elementos con Html5
La función Drag & Drop en Html 5 permite arrastrar y soltar prácticamente cualquier contenido en un documento web, se define como un mecanismo basado en eventos y no requiere de librerías como jQuery, esta nueva característica hace que la interactividad con el usuario del sitio web sea mas sencilla y real.
Para que un elemento se pueda arrastrar y soltar en Html 5, agregamos el atributo draggable=”true” al elemento que queremos arrastrar, para realizar este ejemplo necesitaremos hacer uso del DOM y de Javascript, comenzamos como siempre por crear un documento Html 5 en el que incluimos un elemento <div> con dos eventos, “ondrop” y “ondragover”, este elemento será el elemento de destino donde arrastraremos la imagen.
El evento ondrop se activa cuando se suelta un elemento sobre el elemento de destino.
El evento ondragover se activa cuando se esta arrastrando un elemento y se posiciona sobre el elemento de destino.
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>Los eventos “ondrop” y “ondragover” llaman a las funciones soltar() y permitirSoltar() respectivamente, ambas funciones contendrán el método preventDefault() para evitar la manipulación por defecto del navegador de los elementos, para obtener los datos arrastrados en la función soltar() utilizamos el método dataTransfer.getData(), en este caso, el tipo de datos es “Text”. Por último utilizamos el método appendChild() para mover un elemento dentro de otro.
function soltar(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function permitirSoltar(ev) {
ev.preventDefault();
}A continuación creamos un elemento <img> con un identificador, este elemento contendrá un evento draggable=”true”, que permitirá que el elemento se pueda arrastrar, y un evento ondragstart, que se activará cuando se comience a arrastrar el elemento.
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">El evento “ondragstart” llama a la función arrastrar(), el método dataTransfer.setData() define el tipo de datos y el valor de los datos arrastrados, en este caso, el tipo de datos es “Text” y el valor es el identificador del elemento arrastrable.
function arrastrar(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}Para visualizar correctamente el ejemplo necesitaremos incluir un poco de CSS, al menos debemos darle al elemento <div> un tamaño y un borde para visualizarlo mejor, este es el resultado del ejemplo, arrastra la imagen y suéltala dentro del recuadro.
El código del ejemplo
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Didesweb Drag & Drop</title>
<style>
div {width:43px;height:43px;border:1px solid #CCCCCC;}
</style>
<script>
function permitirSoltar(ev) {
ev.preventDefault();
}
function soltar(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function arrastrar(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
</script>
</head>
<body>
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">
</body>
</html>Ahora que ya hemos visto el funcionamiento de Drag & Drop podemos comenzar a crear aplicaciones más complejas, por ejemplo vamos a hacer que la imagen esté dentro de un elemento <div> y se pueda mover a otro elemento <div>, en el código anterior colocamos el elemento <img> dentro del elemento <div> de esta forma
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)">
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">
</div>Y añadimos otro elemento <div>
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>Puedes ver y descargar el código de este archivo en mi cuenta de GitHub
Valoraciones
1 valoración
Tu valoración
Quizás te interese ...
1/06/2015 html 4m 40s 0 9147
Los atributos propios juegan un papel muy importante en cuanto a semántica y estandarización, con esta nueva incorporación en HTML5 tenemos...
30/05/2015 html 3m 46s 0 8199
HTML5 incorpora nuevos atributos en los enlaces muy interesantes con las que se mejora la funcionalidad de este elemento con nuevas...
29/05/2015 html 7m 48s 0 12906
Los enlaces son un elemento imprescindible en cualquier sitio web, es por ello que debemos escribir correctamente el código y el...
Pablo Guerra 28 agosto, 2022
Muy útil, muchas graciassss!!