Implémentation d'effets glisser-déposer en HTML5 sans recourir aux techniques du didacticiel javascript

Implémentation d'effets glisser-déposer en HTML5 sans recourir aux techniques du didacticiel javascript_html5

WBOY

Libérer： 2016-05-16 15:50:37

original

1223 Les gens l'ont consulté

Dans le développement Web, si nous voulons obtenir l'effet glisser-déposer, nous devons utiliser Javascript. Aujourd'hui, utilisons Html5 pour l'implémenter :
Regardez d'abord le code principal HTML :

Copier le code

Le code est le suivant :

Faites glisser le petit carré jaune dans la grande case rouge

/div>

L'attribut draggable est nouvellement ajouté en HTML5. Il a trois valeurs : true, false et auto signifie déplaçable, false signifie que Auto dépend si le navigateur de l'utilisateur le prend en charge. Pour plus d'informations, veuillez vous référer à la documentation officielle

Ajouter un peu de style
:

Copier le code

Le code est le suivant :

Alors regardons javascript
:

Copier le code

Le code est le suivant : function ListenEvent(eventTarget, eventType, eventHandler ) {

if (eventTarget .addEventListener) {

eventTarget.addEventListener(eventType, eventHandler,false);

} else if (eventTarget.attachEvent) {
eventType = "on" eventType; >eventTarget.attachEvent(eventType, eventHandler );
} else {
eventTarget["on" eventType] = eventHandler;
}
}
// annuler l'événement
function CancelEvent ( event) {
if ( event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false; annuler la propagation
function CancelPropagation ( event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true; 🎜>}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent); "dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer. dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id)); document.getElementById("item") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window .event;
evt. dataTransfer.effectAllowed = 'copy';
function dragOver (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = window.event;
evt.dataTransfer.dropEffect = 'copy';
}

À partir du code ci-dessus, nous voyons l'utilisation d'un ensemble d'événements glisser-déposer fournis par HTML5. Regardons directement ce qui suit :
dragstart
Événement Drag. commence.
glisser
Pendant l'opération de glisser
dragger
Le glisser est utilisé pour déterminer si la cible acceptera le dépôt. déterminer le retour à l'utilisateur.
drop
Le drop se produit
dragleave
Drag quitte la cible
dragend
L'opération de glisser se termine
définit les événements associés pour atteindre la fonction souhaitée. Le J ci-dessus n’est pas difficile à comprendre.
Vous pouvez l'essayer vous-même. Opera dispose actuellement du meilleur support, mais IE ne fonctionne pas bien.
J'espère que cela sera utile à votre développement Web