Implémentation HTML5 CSS3 du glisser-déposer (Drag and Drop) example_html5 compétences du didacticiel

Cet article présente brièvement l'implémentation par glisser-déposer de HTML5.
Le glisser-déposer fait partie du standard HTML5.
Prise en charge des navigateurs : Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge le glisser-déposer.

Élément glissé, dragElement :
(1) Ajouter un événement : ondragstart
(2) Ajouter un attribut : dragable

Placer des éléments, dropElement :
1. Ajouter des événements : ondargenter, ondragover, ondragleave, ondragend, ondrop
C'est très similaire aux événements de mouse in et out, et les mots sont faciles à comprendre, donc Je n'entrerai pas dans les détails, des exemples seront utilisés pour illustrer ci-dessous.

2. Glisser-déposer entre les éléments de la page
Ce qui suit est un petit exemple de glisser-déposer entre divs pour montrer comment chaque événement est déclenché :

Copier le code

Le code est le suivant :