Remettre dragged element dans son parent d'origine

Bonjour à tous,
j'ai des images qui sont dans des divs qui eux sont disposés horizontalement dans un grand div. L'idée est de glisser un div contenant une image et le déposer sur Document.

Je souhaite pouvoir remettre chaque div contenant une image dans sa place d'origine en cliquant sur une croix rouge à côté de l'image (histoire de désélectionner l'image).

PROBLEMATIQUE: Le div général qui contient les divs des images est en position " sticky "(afin que je puisse scroller tout en l'ayant au milieu de l'écran)
Lorsque j'ai utilisé la méthode de récupérer la position d'origine et l'affecter ensuite à l'élément, cela marche partiellement car puisque le div général est "sticky", il reste au milieu du view tandis que l'élément remis suit le mouvement du scroll.

Auriez-vous une solution pour que les éléments reviennent à leur place d'origine relative au parent (qui est "sticky") svp ?

Merci

Bonjour,

Lorsque vous déplacez un élément vers document, il change souvent de contexte de référence (son offset parent).
Pour qu'il revienne exactement dans son emplacement d'origine au sein du parent sticky, la solution la plus propre consiste à utiliser le flux naturel du DOM plutôt que de recalculer des coordonnées top/left.

Au lieu de mémoriser des coordonnées X et Y qui deviennent obsolètes dès que vous scrollez, utilisez un élément vide (un clone invisible) qui reste dans le parent sticky à la place de l'image déplacée.

Au moment du Drag, insérez un div vide (le placeholder) ayant les mêmes dimensions que l'original à l'emplacement exact de l'image.
Au moment du clic sur la croix, utilisez la méthode JavaScript replaceWith() ou appendChild() sur le placeholder pour y remettre l'image originale.

Bonjour Toufik83
En cliquant sur la croix :
* je supprime le div déplacé (et qui contient l'image et la croix) avec "document.getElementById('xxxxx').remove();"
* je créé un nouveau div avec "document.createElement('div')"
* je lui attribue le même style et le même id et className que le div supprimé
* je crée une image qui a le même src que l'image supprimée et une croix et je leur attribue le même style et les même id et className que les éléments supprimés
* je dépose l'image et la croix dans le div créés avec appendChild
* je dépose le div créé dans le div parent du départ

et ainsi de suite...

Cela fonctionne bien.
Merci beaucoup et bonne continuation ;)

Salut,

Je me pose une question : pourquoi supprimer la div déplacée et tout recréer ensuite ?

Ne pourrais-tu pas directement replacer cette div ("dans le div parent du départ") avec un simple appendChild ?

Bonjour,

Citation:

---

Envoyé par OUZFA

* je créé un nouveau div avec "document.createElement('div')"
* je lui attribue le même style et le même id et className que le div supprimé
* je crée une image qui a le même src que l'image supprimée et une croix et je leur attribue le même style et les même id et className que les éléments supprimés

---

tu peux faire tout cela avec element.cloneNode(true]).

Ressource :

• element.cloneNode

Salut,

Citation:

---

Envoyé par NoSmoking

tu peux faire tout cela avec element.cloneNode(true]).

---

Salut,

Si au lieu de supprimer la div déplacée on la replaçait* telle quelle à sa place d'origine on n'aurait besoin ni de supprimer la div déplacée ni de la recréer...

* Un simple appendChild peut faire tout cela, non ?

Citation:

---

* Un simple appendChild peut faire tout cela, non ?

---

dans bien des cas oui, mais cela va dépendre du contexte, peut-on « dropper » plusieurs fois un élément par exemple, si oui le clonage sera pertinent !

Si il s'agit juste de déplacer un élément sur la page, quelque soit l'élément parent in fine, alors appendChild est suffisant.

Salut,

Ok merci.

Sinon oui je proposais cette solution pour le contexte qu'on nous a décrit et que j'ai peut-être mal compris...