Discussion :

[Yobeco]

Je programme une interface graphique en Javascript / html / css. J'utilise la bibliothèque SortableJS pour gérer les drag&drop.

C'est une bibliothèque qui semble très complète.
Cependant, quand un élément en déplacement passe au dessus d'éléments déjà présents dans une zone de dépôt, tous les éléments de cette zone de dépôt se mettent à bouger. Donc quand on passe au-dessus d'une zone de dépôt déjà pleine d'éléments, c'est la panique. Tout se met à bouger : les éléments s'écartent immédiatement pour recevoir le nouvel élément, et ça peut déconcerter l'utilisateur.

Est-il possible de programmer un délai de telle manière que l'élément en déplacement doivent rester plus de 200ms au dessus de la zone où il va être déposé avant que les éléments au dessous réagissent et ne se déplacent pour lui laisser sa position ?

J'ai regardé la doc :
https://github.com/SortableJS/Sortable#options
L'option "delay" semble correspondre au temps pendant lequel l'utilisateur doit maintenir le "clic" sur l'élément avant de pouvoir commencer à le déplacer. Et dans mon cas, il me faut un délai concernant le temps de survol de la zone de dépôt avant que celle-ci ne réagisse.

J'ai aussi essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  delayOnTouchOnly: true,
  delay: 500,

Même avec une valeur réglée à 500ms, les éléments de la zone de dépôt réagissent immédiatement au survol.

Quelqu'un aurait déjà rencontré ce problème ?

[unanonyme]

Bonjour,

Peut être
http://sortablejs.github.io/Sortable/#thresholds
ou le swap
http://sortablejs.github.io/Sortable/#swap

[Yobeco]

Merci pour ta réponse

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
swapThreshold: 1,
swapThreshold: 0.5,
swapThreshold: 0.01,

Ça continue à danser quand on passe au dessus...



Et l'option Swap ne correspond pas à ma situation.

[unanonyme]

Re,

sort: false ?

Mais l'exemple ne semble pas aller dans ce sens.

https://jsbin.com/jayedig/edit?js,output

Sinon vous pouvez le coder à la main. Moyennant quelques tests, ça se tente.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div id=a>
	<div>gggg</div>
</div>
 
<div id=b>
	<div>fff</div>
</div>
 
<script>
let activeEl;
let mousePos;
const src = document.querySelector('#a div');
const dst = document.querySelector('#b');
 
src.addEventListener('mousedown', (ev) => {
        let clone = ev.target.cloneNode(true);
        let rect = ev.target.getBoundingClientRect();
        activeEl=clone;
        activeEl.style["position"] = "absolute";
        activeEl.style["top"] = rect.top+"px";
        activeEl.style["left"] = rect.left+"px";
        document.body.appendChild(clone);
        ev.preventDefault();
        mousePos={x:event.pageX, y:event.pageY};
});
 
window.addEventListener('mousemove', (ev)=> {
        if(activeEl) {
                const dX = ev.pageX-mousePos.x;
                const dY = ev.pageY-mousePos.y;
                const top = parseInt(activeEl.style["top"]);
                const left = parseInt(activeEl.style["left"]);
                activeEl.style["top"] = (top+dY)+"px";
                activeEl.style["left"] = (left+dX)+"px";
                mousePos={x:event.pageX, y:event.pageY};
                
                let rect = dst.getBoundingClientRect();
                const hover =      ev.pageX>=rect.left 
                                                && ev.pageX<=rect.right
                                                && ev.pageY>=rect.top 
                                                && ev.pageY<=rect.bottom;
                if(hover) {
                        dst.style["background"] = "red";
                }else{
                        dst.style["background"] =  null;
                }
                
        }
});
 
window.addEventListener('mouseup', (ev)=> {
        if(activeEl) {
                let rect = dst.getBoundingClientRect();
                const hover =      ev.pageX>=rect.left 
                                                && ev.pageX<=rect.right
                                                && ev.pageY>=rect.top 
                                                && ev.pageY<=rect.bottom;
                if(hover) {
                        dst.appendChild(activeEl);
                        activeEl.style["position"] = null;
                        activeEl.style["top"] = null;
                        activeEl.style["left"] = null;
                }else{
                        activeEl.remove();
                }
                activeEl=null;
        }
});
 
</script>

[NoSmoking]

Bonjour,
pour diminuer l'effet, as-tu essayé de supprimer l'animation ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

animation: 0,  // ms, animation speed moving items when sorting, `0` — without animation

[Yobeco]

...

J'ai essayé, ça fait moins de mouvements à l'écran, cependant, le problème demeure. Les étiquettes changent quand-même de place au survol donc, l'enfant, quand il approche une image de la position voulue, sa cible se déplace. C'est perturbant pour lui...

[Yobeco]

...

Je vais étudier cette solution...

Merci :-)

[NoSmoking]

A regarder ton animation j'ai du mal à comprendre comment sont déclarés, HTML-CSS, ton conteneur, surtout le « conteneur poubelle », et les éléments draggables.

Pourrait-on en avoir un peu plus, une page test en ligne serait le mieux et quels sont les paramètres utilisés pour la création de tes Sortable.