Drag and Drop HTML5

Anterior: HTML5 en línea SVG

Siguiente: geoposicionamiento HTML5

Arrastrar y soltar (drag and drop) es parte del estándar HTML5.

W3cschool icono y arrastrarlo al rectángulo.

Arrastrar y soltar

Arrastrar y soltar es una característica común, que consiste en rastrear en otro lugar después de que el objeto.

En HTML5, arrastrar y soltar es una parte estándar de cualquier elemento puede arrastrar y soltar.

Soporte para el navegador

Internet Explorer 9 o superior, Firefox, Opera, Chrome, Safari y arrastre de apoyo.

Nota: Safari 5.1.2 no es compatible con la resistencia.

Arrastre HTML5 y ejemplos de caída

El siguiente ejemplo es un simple arrastrar y soltar Ejemplo:

Ejemplos

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<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>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Trate »

Puede parecer un poco complicado, pero hemos sido capaces de estudiar diferentes partes del arrastrar y soltar eventos.

El elemento está prevista que caiga

En primer lugar, a fin de que se pueda arrastrar el elemento, establezca el atributo se puede arrastrar a la verdadera:

Lo que arrastrar - ondragstart y setData ()

Entonces, cuando el elemento se arrastra disposición, lo que sucederá.

En el ejemplo anterior, ondragstart atributo llama a una función, arrastre (evento), que define los datos que se arrastran.

dataTransfer.setData método () para establecer el tipo de datos y el valor remolcado datos:

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

En este ejemplo, el tipo de datos es "texto", el valor es Identificación del elemento arrastrable ( "drag1").

¿Dónde poner - ondragover

ondragover evento especifica dónde colocar los datos que se arrastran.

De manera predeterminada, no se puede colocar los datos / elementos en otros elementos. Si necesita configurar le permite colocar, hay que evitar que el modo predeterminado del elemento.

Hacerlo llamando ondragover método event.preventDefault evento ():

event.preventDefault()

Ser colocado - ondrop

Cuando se coloca datos arrastrados, la caída se produce el evento.

En el ejemplo anterior, ondrop atributo llama a una función, gota (evento):

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

Código explicación:

Llamar al método preventDefault () para evitar que el navegador por defecto para el procesamiento de datos (el comportamiento predeterminado del evento de colocación es abrir un enlace)
Obtener datos arrastrados a través del método ( "Texto") dataTransfer.getData. Este método devolverá el mismo conjunto de datos de cualquier tipo en el método setData ().
Los datos se remolcado remolcado Identificación del elemento ( "drag1")
El elemento arrastrado anexa a elementos de lugar (elemento objetivo) en

más ejemplos

Arrastrar y soltar la imagen de ida y vuelta
Cómo arrastrar y soltar imágenes entre dos elementos <div>.