drag and drop - html 5 - insertion DANS ou ENTRE les éléments du DOM

[toluol]

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.

[toluol]

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 !