HTML5 Drag and Drop

Précédent: HTML5 inline SVG

Suivant: HTML5 géolocalisation

Drag and drop (glisser-déposer) fait partie de la norme HTML5.

W3cschool icône et faites-le glisser au rectangle.

Drag and Drop

Drag and drop est une caractéristique commune, qui est de ramper sur un autre emplacement après l'objet.

En HTML5, drag and drop est un élément standard de tout élément peut faire glisser et déposer.

support du navigateur

Internet Explorer 9+, Firefox, Opera, Chrome et Safari soutien glisser.

Remarque: Safari 5.1.2 ne supporte pas glisser.

HTML5 Drag et des exemples de baisse

L'exemple suivant est un simple glisser-déposer Exemple:

Exemples

<!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>

Essayez »

Il peut sembler un peu compliqué, mais nous avons été en mesure d'étudier les différentes parties du glisser-déposer des événements.

Element est mis à déposer

Tout d'abord, afin de rendre l'élément draggable, définissez l'attribut draggable true:

Faites glisser Qu'est - ondragstart et setData ()

Puis, quand l'élément est traîné disposition, ce qui se passera.

Dans l'exemple ci-dessus, ondragstart attribut appelle une fonction, faites glisser (événement), qui définit les données en cours de glissement.

dataTransfer.setData () pour définir le type de données et la valeur remorquée données:

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

Dans cet exemple, le type de données est "Texte", la valeur est l'élément id draggable ( "drag1").

Où mettre - ondragover

ondragover événement spécifié où placer les données en cours de glissement.

Par défaut, vous ne pouvez pas placer les données / éléments dans d'autres éléments. Si vous avez besoin de mettre en place vous permet de placer, il faut éviter le traitement par défaut de l'élément.

Pour ce faire, en appelant ondragover événement event.preventDefault () méthode:

event.preventDefault()

Être placé - ondrop

Lorsqu'il est placé données glissées, déposer événement se produit.

Dans l'exemple ci-dessus, ondrop attribut appelle une fonction, drop (event):

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

Code de l'explication:

Appelez le preventDefault () pour empêcher le navigateur par défaut pour le traitement des données (le comportement par défaut de l'événement de chute est d'ouvrir un lien)
Obtenez données glissées par dataTransfer.getData méthode ( "texte"). Cette méthode sera de retour ensemble de tout type de méthode setData () les mêmes données.
Les données sont remorquée remorquée élément id ( "drag1")
L'élément traîné en annexe pour placer des éléments (élément cible) dans

D'autres exemples

Glissez et déposez l'image avant et en arrière
Comment faire glisser et déposer des images entre deux éléments <div>.