Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ Les Langages Du Web _ drag and drop - html 5 - insertion DANS ou ENTRE les éléments du DOM

Écrit par : toluol 3 Dec 2016, 12:36

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 ?

Écrit par : No6 3 Dec 2016, 15:22

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...

Écrit par : toluol 3 Dec 2016, 17:22

Citation (No6 @ 3 Dec 2016, 15:22)

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 ?

Écrit par : No6 3 Dec 2016, 20:02

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..

Écrit par : toluol 4 Dec 2016, 00:34

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 !

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)