Actualiser une div pendant un drag

Bonjour à tous :D

Désolé je suis un peu rouillé, cela faisait quelques années que je n'avais plus pogrammé... :roll:

Alos voilà mon problème actuel (je l'avais résolu dans le passé, il me semble, mais je ne retrouve plus le code)...

C'est un peu comme tic-tac-toe :

j'ai une div avec par exemple 5 span alignés à l'horizontale

Je clique sur le 4^ième, et je voudrais l'amener entre le 1^er et le 2^ème.

Mais au moment où je passe sur le 3^ième, j'aimerais que le 3^ième se décale pour prendre la place du 4^ième (ils n'ont pas les mêmes largeurs). Les spans sont avec des "float:left"...


mais bien entendu ces déplacements seraient provisoires tant que l'utilisateur n'a pas relâché le pointeur, ou l'a relâché dans un endroit pas OK.. (un drag dynamique mais pas définitif)

PS: si possible sans utiliser de flex..
PPS: si avec flax, me dire comment je peux wrapper les elements quand ca rrive au bout de la taille donnee au conteneur

Merci, et c'est toujours un plaisir d'avoir à venir sur ce forum génial :mrgreen:

Jette peut-être un oeil à cette discussion là https://www.developpez.net/forums/d2...fichages-grid/

En particulier le lien de NoSmo...

Salut,

C'est le même principe utilisé ici : https://jqueryui.com/sortable/#placeholder

Il y a ce fil récent qui te donne un exemple (sans Jquery) pour le principe : Tri par glisser-déposer sans jQuery

Il faut adapter le principe à ton cas précis...

OK j'ai trouvé la solution grâce à un post sur stackoverflow qui n'est même pas voté (:roll:) !!!


Malheureusement j'ai tellement cherché sur le net que j'ai perdu le lien dans l'historique de mes onglets... :roll: J'aurais volontiers cité cette personne, qui visiblement n'a pas reçu les louanges qu'il meritait pour une solution simple et élégante 8O

Alors je la présente ici :

Code:

---

1 2 3 4 5 6 7 8 9

function movefct(elem,direction) { var parentElem = elem.parentElement;   var elemIndex = Array.prototype.indexOf.call(parentElem.children, elem); if (direction===+1) parentElem.insertBefore(elem, parentElem.children[elemIndex + 2]); else parentElem.insertBefore(elem, parentElem.children[elemIndex -1]); }

---

Et par exemple, si on veut bouger un élément à a la place d'un element b , il sufffit de faire :

Code:

---

1 2 3 4 5 6 7 8 9 10

var parentElem = a.parentElement;   ndestination = Array.prototype.indexOf.call(parentElem.children, b); nsource = Array.prototype.indexOf.call(parentElem.children, a));   if (nsource!=ndestination){ if ( ndestination < nsource ) movefct(a, -1); else movefct(a,+1);

---

et il suffit juste de faire un refresh via :

Code:

---

function refresh(madiv){madiv.style.display="block";madiv.style.visibility="visible";madiv.style.display.opacity="1"}

---

Simple et élégant, alors que ça regorge de jquery, et de choses compliquées... :aie:

.:mrgreen::mrgreen:8-)

Merci quand même à tous :mrgreen:

Citation:

---

Envoyé par souviron34

O
Alors je la présente ici :

Code:

---

1 2 3 4 5 6 7 8 9

function movefct(elem,direction) { var parentElem = elem.parentElement;   var elemIndex = Array.prototype.indexOf.call(parentElem.children, elem); if (direction===+1) parentElem.insertBefore(elem, parentElem.children[elemIndex + 2]); else parentElem.insertBefore(elem, parentElem.children[elemIndex -1]); }

---

Et par exemple, si on veut bouger un élément à a la place d'un element b , il sufffit de faire :

Code:

---

1 2 3 4 5 6 7 8 9 10

var parentElem = a.parentElement;   ndestination = Array.prototype.indexOf.call(parentElem.children, b); nsource = Array.prototype.indexOf.call(parentElem.children, a));   if (nsource!=ndestination){ if ( ndestination < nsource ) movefct(a, -1); else movefct(a,+1);

---

---

Oui c'est un code intéressant et effectivement à un moment donné il faut utiliser une méthode d'insertion (insertBefore ou insertAdjacentElement)...

Mais toi tu posais la question dans le contexte d'un glisser/déposer or là, il y a peut-être plus simple et plus rapide que de chercher à chaque fois le rang (index) de chaque enfant (avec cette méthode il faut que les éléments soient des descendants directs (enfants) d'un même parent).

En effet pendant le glisser tu as accès à l’élément survolé (evt.target) il suffit donc de faire une insertion par rapport à cet élément...

Citation:

---

Envoyé par Beginner.

Mais toi tu posais la question dans le contexte d'un glisser/déposer or là, il y a peut-être plus simple et plus rapide que de chercher à chaque fois le rang (index) de chaque enfant (avec cette méthode il faut que les éléments soient des descendants directs (enfants) d'un même parent).

---

C'est le cas.. Comme je disais au début c'est un peu comme un tic-tac-toe..

J'ai plusieurs divs, avec dans chacune une dizaine/douzaine d'enfants directs, qui sont ceux que l'on peut glisser/déposer DANS LA MÊME DIV...

C'est donc tout à fait correct pour moi comme solution....


J'ai essayé plein d'autres solutions proposées ici ou là (au moins une vingtaine), et rien ne marchait comme je souhaitais, ni aussi simplement...J'ai même essayé avec des flex, mais déjà ça ne marchait pas bien, et ensuite c'est de ce que j'ai lu pas compatible avec des écrans tactiles ou des interfaces pour handicapés...

Bref cette solution me convient,,

Merci à tous pour votre participation et intérêt et propositions
:mrgreen: