drag and drop - html 5 - insertion DANS ou ENTRE les éléments du DOM |
Bienvenue invité ( Connexion | Inscription )
drag and drop - html 5 - insertion DANS ou ENTRE les éléments du DOM |
3 Dec 2016, 12:36
Message
#1
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Bonjour,
j'essaie en ce moment de tester le drag and drop en html5. Soit le DOM ci-dessous : Code <div class="drag" draggable="true">élément1</div> <div class="drag" draggable="true">élément2</div> <div id="droptarget"> <div class="bloc1"> <div class="bloc2"></div> <div class="bloc2"></div> </div> <div class="bloc1"></div> <div class="bloc1"></div> </div> J'ai donc des éléments draggable (classe "drag") que je souhaite glisser dans une structure de div hiérarchisée... (entouré par l'id "droptarget") Au "drop", je souhaiterais ajouter du code html à l'endroit souhaité. Mon problème : la plupart des tutos sur le sujet expliquent comment copier un élément DANS un autre par drag and drop... (ou déplacer des éléments dans des listes, mais ce n'est pas ce que je cherche) Je me demandais si on pouvait être plus précis et faire en sorte de choisir entre le "IN" et le "BETWEEN" au moment du drag : L'idéal serait qu'au moment du drag, si je lâche en plein milieu de l'élément, cela copie mon élément à l'intérieur de l'autre (par ex. avec prepend/append) et si je lache sur le bord gauche ou droit (à 4-5px près), cela me copie mon bouton entre les éléments (fonction before/after de jQuery) Je parviens à détecter les bords d'un div avec une fonction de type "Mousemove" Code $('#droptarget').children().mousemove(function(e){ var offset = $(this).offset(); var x = (e.pageX - offset.left); if(x<=5){ //...} else{//..} Mais je ne vois pas comment détecter cela au milieu dragenter/dragleave/dragover pour séparer différentes actions... Peut-on mettre une fonction "mousemove" dans un "dragenter" juste pour détecter la position de la souris ? Ce message a été modifié par toluol - 3 Dec 2016, 12:41. |
|
|
3 Dec 2016, 15:22
Message
#2
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
Hum, j'ai pas regardé en détail ton truc, mais à priori si tu veux gérer un between soit tu passe par un bloc div transparent entre tes blocks, soit tu passe par un calcul sur la position de la souris...
-------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
3 Dec 2016, 17:22
Message
#3
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Hum, j'ai pas regardé en détail ton truc mince... j'ai trop détaillé... ! Je voudrais éviter le bloc transparent dans la mesure du possible... (C'est trop de gestion et risque d'erreur, il me semble) Et le calcul, justement, je le fais : var x = (e.pageX - offset.left); mais je n'arrive pas à le mettre continuellement à jour dans la fonction dragover (comme le fait "mousemove") pourrais-je combiner mousemove + dragover ? Ou comment calculer cette position en permanence dans un drag ? |
|
|
3 Dec 2016, 20:02
Message
#4
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
je ne pense pas que ce soit la peine de faire un tracking sur la position de la souris car de mémoire l'event donne la position de la souris, non ??
quand au bloc qui reçoit le drop tu dois pouvoir retrouver dans ses propriétés sa position, sa taille ... 9a fait longtemps que j'ai pas codé un truc ds le genre, moi.. Ce message a été modifié par No6 - 3 Dec 2016, 21:13. -------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
4 Dec 2016, 00:34
Message
#5
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Excellent, oui, ça marche ! Je m'étais trompé : J'avais bêtement essayé avec dragenter alors qu'il fallait utiliser dragover... bien-sûr ! ^^
Merci de m'avoir fait persévérer ! |
|
|
Nous sommes le : 20th September 2024 - 14:18 |