HTML5 Drag and Drop

Posteado el 09. Oct, 2012 por tuto in HTML y CSS, HTML5

Arrastrar y soltar es una característica muy común en HTML5 es parte de la norma, y cualquier elemento puede arrastrarse.

Puede parecer complicado, pero vamos a ir a través de todas las diferentes partes de un evento de arrastrar y soltar.

Hacer arrastrable un elemento

En primer lugar: Para que se pueda arrastrar el elemento, establezca el atributo arrastrarse en true:

Code block

<img draggable="true">

Lo que hay que arrastrar - ondragstart setData ()

A continuación, especifique lo que debe suceder cuando el elemento se arrastra.

En el ejemplo que vamos a ver, el atributo ondragstart llama a una función, arrastre (evento), que especifica los datos para ser arrastrada.

El dataTransfer.setData () método establece el tipo de datos y el valor de los datos arrastrados:

Code block

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

En este caso, el tipo de datos es “texto” y el valor es el id del elemento arrastrable (“drag1″).

A donde hay que arrastrar - onDragOver

El evento OnDragOver especifica que los datos arrastrados se pueden quitar.

De forma predeterminada, los datos / elemento no se puede quitar en otros elementos.

Esto se hace llamando a la event.preventDefault () método para el evento OnDragOver:

Code block

event.preventDefault()

Donde se colocan- ondrop

Cuando los datos arrastrado se coloca, se produce un evento de colocación.

En el ejemplo siguiente, el atributo ondrop llama a una función, drop(event):

Code block

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

El siguiente ejemplo es un simple arrastrar y soltar:

Code block

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>Arrastre el logo de tutoriales en la web hacia el cuadro:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="logo-tutorialesenlaweb.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

HTML5 Drag and Drop

Articulos relacionados:

Tags: css3, html5

Una respuesta para “HTML5 Drag and Drop”

Bitacoras.com

09. Oct, 2012

Información Bitacoras.com…

Valora en Bitacoras.com: Arrastrar y soltar es una característica muy común en HTML5 es parte de la norma, y cualquier elemento puede arrastrarse. Puede parecer complicado, pero vamos a ir a través de todas las diferentes partes de un evento de ar……