Maison > Article > interface Web > Explication détaillée et exemples du glisser-déposer HTML5 (Drag and Drop)

Explication détaillée et exemples du glisser-déposer HTML5 (Drag and Drop)

高洛峰original: 2017-02-09 15:09:551781parcourir

Introduction

Le glisser-déposer est une fonctionnalité courante qui vous permet de saisir un objet, puis de le faire glisser vers un autre emplacement.

En HTML5, le glisser-déposer fait partie du standard et n'importe quel élément peut être glissé-déposé.

Cliquez d'abord sur un petit exemple : exécutez JavaScript lorsque l'utilisateur commence à faire glisser l'élément

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

Conseil : les liens et les images peuvent être déplacés par défaut et ne nécessitent pas de déplacement. attribut .

Définition et utilisation

déclenchera les événements suivants pendant le processus de glisser-déposer :

Déclencher l'événement sur la cible du glisser (élément source) :

ondragstart - déclenché lorsque l'utilisateur commence à faire glisser l'élément

ondrag - déclenché lorsque l'élément est déplacé

ondragend - déclenché lorsque l'utilisateur finit de faire glisser l'élément

déclenché lorsque la cible est libérée :

ondragover - Cet événement est déclenché lorsque l'objet glissé par la souris entre dans la portée de son conteneur

ondragover - Lorsqu'un objet glissé est glissé dans la portée d'un autre conteneur de l'objet Déclencher cet événement

ondragleave - Cet événement est déclenché lorsque l'objet glissé par la souris quitte la portée de son conteneur

ondrop - Cet événement est déclenché lorsque le bouton de la souris est relâché pendant un processus de glissement

Prise en charge du navigateur

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge le glisser.

Remarque : Safari 5.1.2 ne prend pas en charge le glisser ; lors du déplacement d'un élément, l'événement ondragover sera déclenché toutes les 350 millisecondes.

Exemple

Publiez d'abord le code, puis expliquez-le un par un :

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<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>
</body>
</html>

L'effet de page avant de faire glisser est :

HTML5 拖放（Drag 和 Drop）详解与实例

Analysons séparément la signification du code ci-dessus.

Définissez l'élément pour qu'il soit déplaçable

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

<img draggable="true">

Que faire glisser - ondragstart et setData()

Ensuite, spécifiez ce qui se passe lorsque l'élément est déplacé.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à glisser.

La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :

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

Dans cet exemple, le type de données est "Texte" et la valeur est pour le déplaçable identifiant de l'élément("glisser1").

Où placer - ondragover

L'événement ondragover spécifie où placer les données glissées.

Par défaut, les données/éléments ne peuvent pas être placés à l'intérieur d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément.

Cela se fait en appelant la méthode event.preventDefault() de l'événement ondragover :

event.preventDefault()

pour le placement - ondrop

Lorsque les données glissées sont placées, le un événement de chute se produira.

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

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

Explication du code :

Appelez PreventDefault() pour éviter le navigateur par défaut traitement des données (le comportement par défaut de l'événement drop est de l'ouvrir sous forme de lien)

Récupérez les données glissées via la méthode dataTransfer.getData("Text"). Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData().

Les données déplacées sont l'identifiant de l'élément déplacé ("drag1")

Ajouter l'élément déplacé à l'élément de placement (élément cible)

Le résultat de l'implémentation est comme le montre la figure :

HTML5 拖放（Drag 和 Drop）详解与实例

Objet dataTransfer

Pendant l'opération de glisser, nous pouvons utiliser l'objet dataTransfer pour transférer des données afin que les données puissent être transférés à la fin de l’opération de glissement. Effectuez d’autres opérations.

Propriétés de l'objet :

dropEffect : définit ou renvoie le comportement de glisser-déposer autorisé à se produire sur la cible du glisser-déposer. Si le comportement de glisser-déposer défini ici ne fait plus partie des multiples comportements de glisser-déposer définis par la propriété effectAllowed, l'opération de glisser-déposer échouera. La valeur de l'attribut ne peut être que l'une des quatre valeurs "null", "copy", "link" et "move".

effectAllowed : définit ou renvoie le comportement de glissement autorisé pour l'élément déplacé. Les valeurs des propriétés peuvent être définies sur "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all" et "uninitialized".

items : Cette propriété renvoie l'objet DataTransferItems, qui représente les données de déplacement.

types : cet attribut renvoie un objet DOMStringList, qui inclut tous les types de données stockées dans dataTransfer.

Méthode Objet :

setData(format,data) : Attribue des données au format spécifié à l'objet dataTransfer. Le paramètre format définit le format des données, qui est le type de données, et data sont les données à attribuer.

getData(format) : Obtenir les données au format spécifié à partir de l'objet dataTransfer. Le format représente le format des données et data est les données.

clearData([format]) : Supprime les données au format spécifié de l'objet dataTransfer. Le paramètre est facultatif. S'il n'est pas spécifié, toutes les données de l'objet seront supprimées.

addElement(element) : Ajouter une icône personnalisée

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

function dragstart_handler(ev) {  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

火狐浏览器拖拽问题

但是进行到这儿在火狐浏览器中发现一个问题：

html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下不管用？

解决办法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

更多HTML5 拖放（Drag 和 Drop）详解与实例相关文章请关注PHP中文网！

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML5 ajoute une fonction de saisie vocale à la zone de saisieArticle suivant：HTML5 ajoute une fonction de saisie vocale à la zone de saisie

Articles Liés

Voir plus