Commentaire: Il a toujours été ce que les internautes veulent voir s'ils n'utilisent pas JavaScript pour réaliser l'effet de glisser-déposer. Aujourd'hui, HTML5 vous a fait une introduction détaillée ensuite. Les amis qui ont besoin de savoir peuvent y faire référence.
Dans le développement Web, nous devons utiliser JavaScript pour réaliser l'effet glisser-déposer. Aujourd'hui, implémentez-le en utilisant HTML5:
Regardons d'abord le code HTML de base:
<div>
<p> Faites glisser de petits carrés jaunes dans une grande boîte rouge </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
La propriété Draggable est nouvellement ajoutée par HTML5. Il a trois valeurs: vrai, faux, auto. Vrai est traîné, faux n'est pas autorisé. Auto dépend de savoir si le navigateur de l'utilisateur le prend en charge. Pour plus d'informations, veuillez vous référer à la documentation officielle.
Ajoutez un petit style:
<style type = "text / css">
#baisse
{
Largeur: 300px;
hauteur: 200px;
Color d'arrière-plan: # FF0000;
rembourrage: 5px;
Border: 2px solide # 000000;
}
#article
{
Largeur: 100px;
hauteur: 100px;
Color d'arrière-plan: # FFFF00;
rembourrage: 5px;
marge: 20px;
Border: 1px en pointillé # 000000;
}
* [draggable = true] {
-Moz-user-Select: Aucun;
-khtml-user-drag: élément;
curseur: déplacer;
}
*: - khtml-drag {
Color en arrière-plan: RGBA (238 238 238, 0,5);
}
</ style>
Ensuite, regardons JavaScript:
function listEnevent (eventTarget, EventType, EventHandler) {
if (eventTarget.addeventListener) {
eventTarget.addeventListener (EventType, EventHandler, false);
} else if (eventTarget.attachevent) {
EventType = "on" + EventType;
EventTarget.Attachevent (EventType, EventHandler);
} autre {
eventTarget ["on" + eventType] = eventHandler;
}
}
// Annuler l'événement
function cancelEvent (événement) {
if (event.preventDefault) {
event.PreventDefault ();
} autre {
event.ReturnValue = false;
}
}
// annuler la propagation
fonction ansemberpropagation (event) {
if (event.stoppropagation) {
event.stoppropagation ();
} autre {
event.cancelbubble = true;
}
}
window.onload = function () {
var cible = document.getElementById ("Drop");
listEnevent (Target, "DragEsen", CancelEvent);
listEnevent (cible, "dragover", dragover);
listEnevent (cible, "drop", fonction (evt) {
CancelPropagation (EVT);
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.datatransfer.getData ("texte");
Target.ApendChild (document.getElementById (ID));
});
var item = document.getElementById ("item");
item.setAttribute ("draggable", "true");
listEnevent (item, "dragstart", fonction (evt) {
evt = evt || window.event;
evt.Datatransfer.Effectallowed = 'copy';
evt.datatransfer.setData ("texte", item.id);
});
};
fonction dragover (evt) {
if (evt.preventDefault) evt.PreventDefault ();
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
retourne false;
}
À partir du code ci-dessus, nous examinons les événements de glisser-déposer fournis en utilisant un ensemble de HTML5, et examinons directement les éléments suivants:
dragstart
L'événement de traînée commence.
traîner
Pendant l'opération de traînée.
dragenner
La traînée est sur la cible; utilisé pour déterminer si la cible acceptera la chute.
Dragover
La traînée est sur la cible; utilisé pour déterminer les commentaires à l'utilisateur.
baisse
Une goutte se produit.
dragleave
La traînée de feuille cible.
traîner
Le fonctionnement de glisser se termine.
Définissez les événements connexes pour implémenter la fonction souhaitée. Le JS ci-dessus n'est pas difficile à comprendre.
Vous pouvez l'essayer vous-même. Actuellement, il prend en charge le meilleur de l'opéra, mais l'effet IE n'est pas bon.
J'espère que cela sera utile à votre développement Web.