Maison > Article > interface Web > Explication détaillée du glisser-déposer de H5

Explication détaillée du glisser-déposer de H5

php中世界最好的语言original: 2018-03-27 11:12:023205parcourir

Cette fois, je vais vous apporter une explication détaillée du Drag and Drop H5. Quelles sont les précautions lors de l'utilisation du Drag and Drop H5 ? Voici des cas pratiques, jetons un coup d'oeil.

Introduction

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

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 Oui, aucun attribut déplaçable n'est requis.

Définition et utilisation

Les événements suivants seront déclenchés lors du processus de glisser-déposer :

Déclenchés lors du glisser Événement target (é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é une fois que l'utilisateur a fini de faire glisser l'élément

Événement déclenché lorsque la cible est relâchée : ondragender - Cet événement est déclenché lorsque l'objet glissé par la souris entre sa portée de conteneur

ondragover - Cet événement est déclenché lorsqu'un objet déplacé est glissé dans la portée d'un autre conteneur d'objets
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é lors d'un processus de glisser

Prise en charge des navigateurs

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

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>
#p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<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 :

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 l'identifiant de l'élément déplaçable ("drag1").

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

lors du placement les données glissées Quand, un événement de dépôt se produit.

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 :

Appel PreventDefault ( ) pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de s'ouvrir sous forme de lien)
Récupérez les données glissées via dataTransfer.getData("Text") méthode . 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 obtenu en

est tel qu'indiqué sur la figure :

dataTransfer对象

在拖曳操作的过程中，我们可以用过dataTransfer对象来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作。

对象属性：

dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

对象方法：

setData(format,data):将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据
getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。
clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。
addElement(element):添加自定义图标
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>
 <p id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</p>
</body>

火狐浏览器拖拽问题

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

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

解决办法：

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

或者对于上面的实例中，添加到ondrop方法里面也是可以的：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus