Le glisser-déposer est une caractéristique commune, c'est-à-dire à une autre position après l'objet de capture. Dans HTML5, les utilisateurs peuvent utiliser une souris pour sélectionner un élément glisser, faire glisser l'élément vers un élément placable et mettre le bouton de la souris sur ces éléments. Pendant l'opération de traînée, le transparent semi-transparent indiquant le pointeur de la souris peut être traîné.
Si nous espérons que l'élément pourra être glisser, alors nous devons définir sa propriété draggable sur true (une paramètre de défaut de balise est vrai))
Événement Drag and DropPlusieurs événements seront déclenchés à différentes étapes de l'opération de glisser-déposer, et l'attribut Datatransfer de l'incident de glisser-ganglion doit stocker les données pertinentes dans l'opération de glisser-déposer.
| Dragstart | Activé pour [élément source], lorsqu'un élément commence à être glisser, l'élément glissé de l'utilisateur nécessite un événement DragStart supplémentaire. Dans cet incident, l'auditeur mettra en place des informations liées à cette traînée, telles que la traînée des données et des images. |
| Dragenner | Actif pour [élément source], se déclenche lorsque la souris dans la traînée dans un élément. L'auditeur de cet incident doit indiquer si la souris est autorisée à être libérée dans ce domaine. Si l'auditeur n'est pas défini ou si l'écouteur n'est pas utilisé, il n'est pas autorisé à être publié par défaut. |
| dragover | Actif dans [élément cible], déclenche lorsque la souris déplacée par une traînée. |
| dragleave | Actif dans [élément cible], déclenche lorsque l'élément de départ de la souris en traînant. Il peut être utilisé comme point fort ou insérer qui peut être libéré. |
| Traîner | Actif pour [élément source], l'événement est déclenché lorsque l'élément est traîné. |
| baisse | Active pour [l'élément cible], déclenche sur l'élément de libération lorsque la libération de la libération de l'opération de glisser. |
| traîner | Actif pour [élément source], la source de glisser est déclenchée à la fin de l'opération de traînée, que l'opération soit réussie. |
(Lors de la traînée, il ne déclenchera que les événements liés à la traînée, les événements de souris, tels que MouseMove, qui ne seront pas déclenchés)
Objet DataTransferLors du traitement de l'opération de glisser-déposer, nous devons utiliser l'objet DataTransfer pour enregistrer les données traînées. Datatransfer peut enregistrer une ou plusieurs données, un ou plusieurs types de données.
propriété
| Dropeffect | Dropeffect [String] Spécifiez l'effet de placement réel, valeur possible: Copie: copier dans un nouveau poste Déplacer: passer à une nouvelle position Lien: créez un lien d'une source à une nouvelle position Aucun: interdit de placer (aucune opération) |
| effet | [String] Spécifiez l'effet admissible lors de la traînée, des valeurs possibles: Copier: Copiez dans un nouveau poste. Déplacer: passer à une nouvelle position. Lien: Créez un lien d'une source à un nouvel emplacement. CopyLink: Autoriser la copie ou le lien. COPYMOVE: Autorisez la copie ou déplacer. LinkMove: Autoriser les liens ou déplacer. Tous: permettez toutes les opérations. Aucun: toutes les opérations interdites. Non initialisé: la valeur par défaut (valeur par défaut) équivaut à tous. |
| Fichiers | Contient une liste de fichiers locaux disponibles sur la transmission de données. Si l'opération de glisser n'implique pas le fichier glisser, cet attribut est une liste vide. |
| types | Enregistrez une liste de types de données de stockage comme premier élément, l'ordre est cohérent avec l'ordre d'ajouter des données. Si aucune donnée n'est ajoutée, une liste vide sera renvoyée. |
méthode
| void adddelement (élément élément) | Définissez la source de glisser. Il n'est généralement pas nécessaire de changer cela. L'objectif par défaut est d'être traîné nœuds |
| Void cleardata (type de chaîne) | Supprimer les données associées à un type donné. Les paramètres de type sont facultatifs. Si le type est vide ou non spécifié, supprimez tous les types de données associées. S'il n'y a pas de type spécifié de données ou de transmission de données ne contient aucune donnée, cette méthode n'aura aucun effet. |
| String getData (type de chaîne) | Obtention d'un type de données donné, si les données du type donné n'existent pas ou si les données sont stockées sans contenir de données, la méthode renvoie une chaîne vide. |
| void setData (type de chaîne, données de chaîne) | Définissez des données pour un type donné. Si le type de données n'existe pas, il sera ajouté à la fin et le dernier projet de cette liste de types sera un nouveau format. Si vous existez déjà, remplacez les données existantes dans la même position. Autrement dit, lorsque le même type de données est remplacé, l'ordre de la liste des types ne sera pas modifié. |
| void setDragimage (image domelement, long x, long y) | Personnalisez une image d'une traînée attendue. Dans la plupart des cas, cet élément n'a pas besoin d'être défini, car le nœud traîné est créé comme l'image par défaut. L'image doit être utilisée comme élément d'image de rétroaction de glisser Le déplacement horizontal dans l'image x. Le décalage vertical dans la statue y. |
Support de navigateur
Internet Explorer 9+, Firefox, Opera 12, Chrome et Safari 5+
Code de démonstration
<! ; #ccccff solide; > </ div> <div class = bin> & nbsp; </div> </ div> <script type = text / javascript> var bins = document.queyletorall ('. bin'); 'Box'); E.Datatransfer.Effectellowed = 'Move'; true; L'élément Drag entre l'élément cible bin.ondragover = fonction (e) {e.preentDefault (); '; fonction (e) {if (drag) {drag.parentNode.reMovechild (drag); Fonction (e) {E.PreventDefault (); E.Stoppropagation ();Ce qui précède est l'introduction des informations liées à Drag and Drop dans HTML5.