Le glisser-déposer fait partie de la norme HTML5.
Support de navigateur
Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge la traînée et la dépôt.
Élément de traînée, traînée:
1. Ajouter l'événement: Ondragstart 2. Ajouter des attributs: dragableÉlément de place, Droptelement:
1. Ajouter des événements: ondargenter, endragover, endragleave, endragend, ondrop
Il est similaire aux incidents de Mouser dans la classification, et il est bien compris.
1. Faites glisser et déposez entre les éléments de la page
Utilisons un petit exemple ci-dessous, la traînée et la chute entre la div s'affiche, comment chaque événement est déclenché:
<! src = ../../jquery-1.8.3.js type = text / javascript charset = utf-8> </ script> <script type = text / javascript> / *** glisser (glisser et déposer) est. Composant standard HTML5. * Soutien du navigateur * Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge la glisser et la drop. notre * * Lorsque les données de glisser sont placées, l'événement de dépôt se produit. P] + @@);} * / Console.log (ONDROP); ) .d (div) .Length));. ;} $ (#Dropele) [0] .ondRagleave = fonction (événement) {console.log (ondrop Leave); Head> <body> <Div Style = Border: 1px Red solide; : 330px;Vous devez faire attention à:
A. OnTragover doit organiser le comportement par défaut de l'événement.
B. Le comportement par défaut de l'événement DROP est ouvert dans un lien, il doit donc également empêcher son comportement par défaut.
Il est également possible de remarquer que lors de la traînée et de la chute, l'événement contient un objet Event.Datatransfer. et le copier.
Voici d'autres méthodes de l'objet:
Event.Datatransfer:
items = [objet dataTransferntemlist] @@ drag_drop.html: 44
Files = [objet FileList] @@ draw_drop.html: 44
Types = Text / PLAIN @@ drag_drop.html: 44
Effectifaled = all @@ drag_drop.html: 44
Dropeffect = Aucun @@ drag_drop.html: 44
ClearTata = fonction CleanAta () {[code natif]} @@ drag_drop.html: 44
getData = Fuory getData () {[code natif]} @@ drag_drop.html: 44
setData = fonction setData () {[code natif]} @@ drag_drop.html: 44
setDragImage = fonction setDragImage () {[code natif]} @@
J'ai utilisé JS pour imprimer tous ses attributs:
1. GetData, les exemples de SetData ont été utilisés dans l'exemple ci-dessus, ClearData consiste à effacer les données des paramètres.
2. Il convient de noter que les fichiers.
3. SetDragimage (image, x, y) est utilisé pour définir les rendus de déménagement avec la souris pendant le mouvement de la souris. Doit être défini dans DragStart.
4. Les types, les effetsals et la dropffect sont les types de traînée dans l'élément.
Ce qui précède est tout le contenu de cet article.