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

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 :

#drop

{
largeur : 300px; hauteur : 200px ;
couleur d'arrière-plan : #ff0000 ;
remplissage : 5px ;
bordure : 2px solide
}
#item
{
largeur : 100px ; ;
hauteur : 100px ;
couleur d'arrière-plan : #ffff00 ;
remplissage : 5px ;
marge :
bordure : 1px en pointillés #000000
}
*; [draggable=true] {
-moz-user-select:none;
-khtml-user-drag: élément;
curseur:
}
*:-khtml-drag; {
background -color: rgba(238,238,238, 0.5);
}




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

.