IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> drag and drop - html 5 - insertion DANS ou ENTRE les éléments du DOM
Options
toluol
posté 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... sad.gif
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.
Go to the top of the page
 
+Quote Post
No6
posté 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)
Go to the top of the page
 
+Quote Post
toluol
posté 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



Citation (No6 @ 3 Dec 2016, 15:22) *
Hum, j'ai pas regardé en détail ton truc

mince... j'ai trop détaillé... ! tongue.gif

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 ?

Go to the top of the page
 
+Quote Post
No6
posté 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)
Go to the top of the page
 
+Quote Post
toluol
posté 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 ! thumb.gif
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 19th March 2024 - 03:21