Maison > Article > interface Web > Exemple d'explication de l'interface HTML5 DragEvent
Exemple d'explication de l'interface HTML5 DragEvent
- 零下一度original
- 2017-05-26 15:41:482060parcourir
DragEvent est une interface d'événement DOM qui représente l'interaction entre le glisser-déposer. L'utilisateur commence à faire glisser en plaçant un dispositif de pointage (tel qu'une souris) sur la surface de la cible, puis fait glisser le pointeur vers un nouvel emplacement (tel qu'un autre élément DOM). L'application résout automatiquement les interactions par glisser-déposer. L'interface DragEvent hérite des propriétés de mouseEvent et Event.
Types d'événements
DragEvent n'est pas un événement unique, il contient plusieurs événements, ces événements sont : drag, dragstart, dragenter, dragend, dragover, dragexit, dragleave, drop.
glisser : Cet événement est déclenché à plusieurs reprises pendant le processus de glissement de l'élément, une fois toutes les 100 millisecondes. L'élément cible de cet événement est l'élément déplacé. Cet événement peut bouillonner et annuler le comportement par défaut.
dragstart : Cet événement est déclenché lorsque l'utilisateur commence à faire glisser. L'élément cible de cet événement est l'élément déplacé. Parmi ces événements, l'événement dragstart est déclenché en premier. Cet événement peut bouillonner et annuler le comportement par défaut.
dragenter : Cet événement est déclenché lorsque l'élément glissé entre dans une cible de dépôt légale. L'élément cible de cet événement est la cible droppable. Cet événement peut bouillonner et annuler le comportement par défaut.
dragover : Cet événement est déclenché à plusieurs reprises lorsque l'élément déplacé se déplace dans la plage cible du dépôt, une fois toutes les 100 millisecondes. L'élément cible de cet événement est la cible droppable. Cet événement peut bouillonner et annuler le comportement par défaut.
dragend : Cet événement est déclenché à la fin du glissement. L'élément cible de cet événement est l'élément déplacé. Dragend tire le dernier parmi ces événements. Cet événement peut éclater et ne peut pas annuler le comportement par défaut.
dragleave : Cet événement est déclenché lorsque l'élément glissé quitte la cible légale de dépôt. L'élément cible de cet événement est la cible droppable. Cet événement peut éclater et ne peut pas annuler le comportement par défaut.
dragexit : cet événement est déclenché lorsqu'un élément pouvant être déposé n'est plus la cible de dépôt la plus proche de l'opération de glisser. L'élément cible de cet événement est l'élément droppable. Cet événement peut éclater et n'annulera pas le comportement par défaut.
drop : Cet événement est déclenché lorsque le dispositif de pointage de l'élément glissé est relâché sur la cible déposable. L'élément cible de cet événement est la cible déposable. L'événement drop se déclenche avant l'événement dragend. Cet événement peut bouillonner et annuler le comportement par défaut.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('drag',function(event){
event.target.style.backgroundColor = 'black';
},false);
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
},false);
document.addEventListener('dragend',function(event){
event.target.style.backgroundColor = 'yellow';
},false);
document.addEventListener('dragover',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'blue';
},false);
document.addEventListener('dragenter',function(event){
event.target.style.backgroundColor = 'green';
},false);
document.addEventListener('dragleave',function(event){
event.target.style.backgroundColor = 'pink';
},false);
document.addEventListener('dragexit',function(event){
event.target.style.backgroundColor = 'red'
},false);
document.addEventListener('drop',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'white';
console.log(2);
},false)
</script>
</body>
</html>Les objets événement de ces événements contiennent les méthodes et propriétés des objets événement des événements de souris. De plus, il existe un attribut dataTransfer
pour rendre l'élément déplaçable
En HTML, les seuls éléments déplaçables par défaut sont l'image, le lien et le texte sélectionné. Pour rendre d'autres éléments déplaçables, vous devez effectuer les trois choses suivantes :
1. Définissez un attribut déplaçable sur l'élément et définissez la valeur de cet attribut sur true
2. element Ajoutez un écouteur d'événement dragstart
3. Définissez les données de glissement sur l'écouteur d'événement dragstart via event.DataTransfer.setData(type, value).
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</p>Si l'attribut draggable est désactivé ou défini sur false, alors cet élément ne peut pas être déplacé. L'attribut déplaçable peut être défini sur n'importe quelle propriété. Lorsqu'un élément est défini comme déplaçable, cliquer ou faire glisser la souris sur l'élément ne sélectionnera pas le texte ou les autres éléments de l'élément. Lorsque l'utilisateur commence à faire glisser, l'événement dragstart sera déclenché. Dans l'événement dragstart, vous pouvez spécifier les données de glisser via setData(), spécifier le retour d'image via setDragImage() et spécifier l'effet de glisser en définissant l'attribut effectAllowed et dropEffect. attribut. Les données de déplacement doivent être spécifiées, mais le retour d'image est que l'effet de déplacement n'est pas nécessaire
Données de déplacement
Les données de déplacement contiennent deux parties d'informations, à savoir le type de données et la valeur des données. , le type de données est String et la valeur des données se présente également sous la forme d'une chaîne. Les types de données glisser-déposer incluent : texte/plain, texte/html, image/jpeg, texte/uri-list, etc. Vous pouvez également personnaliser le type.
Vous pouvez appeler la méthode setData() plusieurs fois pour définir plusieurs données par glisser-déposer. Comme suit :
var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');application/x-bookmark est un type personnalisé.
Si vous définissez un nouveau type de données via cette méthode, les nouvelles données de déplacement seront à la fin de la liste des données de déplacement. Si vous définissez le type de données existant, les nouvelles données écraseront les données. ancienne.
Le type spécifié de données glisser-déposer peut être obtenu via getData()
Le type spécifié de données glisser-déposer peut être effacé via clearData()
Commentaire d'image
Le retour d'image n'a pas besoin d'être défini. Par défaut, il s'agit d'une image translucide générée à partir de la cible du glisser, et cette image suivra le mouvement de la souris pendant le glissement. Vous pouvez personnaliser le retour d'image via la méthode setDragImage(image,xOffect,yOffect).
setDragImage() accepte trois paramètres. Le premier paramètre représente la référence de l'image à , et les deuxième et troisième paramètres représentent la position du coin supérieur gauche de l'image par rapport au pointeur de la souris. L'unité est en pixels
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
event.dataTransfer.setDragImage(document.getElementById('img'),30,30);
},false);
</script>
</body>
</html>Effet de glisser
Vous pouvez spécifier l'effet de glisser en définissant effectAllowed et dropEffect
事件对象的dataTransfer属性
dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性
1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。
4.items
是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。
5.types
它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法
1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferList对象
通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferList对象的属性
1.length:得到拖拽数据的数量
DataTransferList对象的方法
1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象
dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性
1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法
1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件
要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。
<p id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)"> <strong><Drag one or more files to this Drop Zone ...</strong> </p>
例子一，访问文件名
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// If dropped items aren't files, reject them
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i=0; i < dt.items.length; i++) {
if (dt.items[i].kind == "file") {
var f = dt.items[i].getAsFile();
console.log("... file[" + i + "].name = " + f.name);
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i=0; i < dt.files.length; i++) {
console.log("... file[" + i + "].name = " + dt.files[i].name);
}
}
}例子二，阻止浏览器默认行为
function dragover_handler(ev) {
console.log("dragOver");
// Prevent default select and drag behavior
ev.preventDefault();
}例子三，清除数据
function dragend_handler(ev) {
console.log("dragEnd");
// Remove all of the drag data
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to remove the drag data
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
// Use DataTransfer interface to remove the drag data
ev.dataTransfer.clearData();
}
}【相关推荐】
1. 免费h5在线视频教程
2.Comprenez HTML5 en 20 minutes et voyez les nouvelles fonctionnalités de H5.
3 Vous apprendre à implémenter une micro-scène H5
4.Exemple de code H5 pour créer une page d'inscription
5La différence entre H5 et le HTML traditionnel
6. 🎜>Réussi Explication détaillée des exemples de H5 implémentant la fonction caméraCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur