SortableJS : delai au survol

Version imprimable

03/02/2024, 21h33
Yobeco

SortableJS : delai au survol
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:

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 ?
03/02/2024, 21h46
unanonyme

Bonjour,

Peut être
http://sortablejs.github.io/Sortable/#thresholds
ou le swap
http://sortablejs.github.io/Sortable/#swap
03/02/2024, 22h45
Yobeco

1 pièce(s) jointe(s)
Merci pour ta réponse

J'ai essayé :
Code:

1 2 3 swapThreshold: 1, swapThreshold: 0.5, swapThreshold: 0.01,
Ça continue à danser quand on passe au dessus...

Pièce jointe 650209

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

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:

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>

04/02/2024, 18h01
NoSmoking

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

Code:

animation: 0, // ms, animation speed moving items when sorting, `0` — without animation
04/02/2024, 22h19
Yobeco

Citation:

Envoyé par NoSmoking

...

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...
04/02/2024, 22h20
Yobeco

Citation:

Envoyé par unanonyme

...

Je vais étudier cette solution...

Merci :-)
05/02/2024, 12h33
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.
05/02/2024, 12h52
unanonyme

Sinon, tu peux essayer ça, jquery reste d'actualité,
https://jqueryui.com/droppable/

1 pièce(s) jointe(s)

Citation:

Envoyé par 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.

Merci pour l'intérêt que tu portes à mon problème.

Je ne comprends pas bien ce que tu veux dire par "déclarés". Tu veux parler de la structure HTML ?

Code:

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>MAEL V0.4</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
  <body>
      <div id="container-corps">
        <div id="col-gauche">
          <div id="trou-cat">
            <img id="logo-MAEL" src="Medias/Logo-MAEL-128px-Alpha.png">
            <div> <span id="MAEL"> MAEL </span> <br> <span id="version"> Phrases<br>V0.4 </span> </div>
          </div>
          <div id="container-cat">
          </div>
        </div>
        <div id="container-classeurs">       
            <div id="container-onglets">
            </div>
            <div id="container-img">
            </div>
        </div>
      </div>
        <div id= "container-drop" >
          <div id="container-poub">
            <img id="poubelle" src="Medias/Poubelle-fermee.png">
          </div>
          <div id="container-line">
          </div>
        </div>
      </div>
      <div id="container-phrase">
        <button class="boutons-bas"  onclick="generList()">
          <img src="Medias/Dire.png" alt="Dire">
        </button>
        <div id="text-genere">
          Texte généré depuis la liste de mots.
        </div>
      </div>
      <div id="container-boutons">
        <button class="boutons-bas">
          <img src="Medias/Effacer.png" alt="Effacer">
        </button>
        <button class="boutons-bas">
          <img src="Medias/Sauvegarder.png" alt="Sauvegarder">
        </button>
        <button class="boutons-bas">
          <img src="Medias/Ouvrir.png" alt="Ouvrir">
        </button>
      </div>
      <br /> <hr /> 
    <!-- Script placé à la fin pour attendre le chargement complet de la page avant exécution -->
    <script src="Sortable.min.js"></script>
    <script src="options.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Les options de SortableJS :

Code:

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
const containerImg = document.getElementById('container-img');
const containerLine = document.getElementById('container-line');
const poubelle = document.getElementById('poubelle');
 
Sortable.create(containerImg, {
	group: {
		name: "container-img",
		pull: "clone",
		put: false
	},
	animation: 250,
	easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",  // https://easings.net/#easeOutBack
	sort: false, // désactiver la réorganisation
	// delayOnTouchOnly: true,
	// delay: 1000,
	// ghostClass: "futur-place",
	// chosenClass: "active",
	// dragClass: "invisible",
});
 
Sortable.create(containerLine, {
	group: {
		name: "container-img"
 
	},
	animation: 250,
	easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
	ghostClass: "futur-place",
	// delayOnTouchOnly: true,
	// delay: 1000,
	// chosenClass: "active",
	// dragClass: "invisible",
	filter: "#poubelle"
});
 
 
Sortable.create(poubelle, {
	group: {
		name: "container-img",
		pull: false,
		put: true
	},
 
 
});

Concernant la poubelle, elle n'était pas encore vraiment implémentée dans la version de l'animation précédente. C'était une simple image.
Maintenant, elle commence à être active, bien qu'elle ne fasse qu'accumuler les objets reçus sans réellement les effacer (Je ne sais pas encore faire ça)

Pièce jointe 650462

Les éléments déplaçables et les onglets sont générés par mon programme JavaScript depuis des fichiers JSON (Que je vais remplacer par MySQL un de ces jours).
Ils sont placés dans une division rendue "dagable" grâce à SortableJS.

Citation:

"une page test en ligne serait le mieux"

Je ne sais pas comment faire cela, pourtant, je voudrais tester mon interface depuis une tablette... Si quelqu'un connait un hébergement gratuit, facile à mettre en place, je suis preneur. :-)
J'ai essayé avec "000 Webhost", ça ne fonctionne pas et personne ne répond à mes courriers...

Si vous remarquez bien, rien que de passer dans la marge créée par "margin", l'élément en déplacement est directement placé au début, puis en survolant, tous les éléments s'écartent immédiatement sur le passage.

Merci pour votre aide :-)

08/02/2024, 00h19
Yobeco

Citation:

Envoyé par unanonyme

Sinon, tu peux essayer ça, jquery reste d'actualité,
https://jqueryui.com/droppable/

J'ai besoin de ces effets d'écartement progressifs et de rendre visible le lieu où sera déposé l'élément...
C'est une interface qui va servir pour de petits enfants et des enfants et adolescents ayant un handicap mental.

Après réalisation d'un fichier test et sur base de ton code, j'ai enfin réussi à voir ce qui te chagrine, il faut déplacer la souris doucement à l'entrée de la zone.

Le souci vient donc de la façon qu'a la bibliothèque de traiter la position d'insertion.
Lorsque tu entres dans la zone de dépôt il n'y a pas d'élément qui réponde aux critères, le 1st élément, quand existe, est situé au moins à une distance égale au padding du conteneur et/ou à une distance égale à la margin des éléments contenus ce qui entraine une insertion, de l'élément glissé, en début de conteneur avant de le replacer correctement.

Dans les options de la bibliothèque on trouve :

Code:

direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given)

... or dans ton cas il faut explicitement préciser l'option direction: "vertical".
Code:

1 2 3 4 5 6 7 8 9 Sortable.create(containerLine, { group: { name: "container-img" }, direction: "vertical", animation: 250, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)", ghostClass: "futur-place", });
Sur ma page de test, ce souci a bel et bien disparu.

10/02/2024, 02h45
Yobeco

Citation:

dans ton cas il faut explicitement préciser l'option direction: "vertical".

Super ! Effectivement, ça empêche le premier mouvement dû au fait que, l'élément au dessus du "margin", est envoyé automatiquement au début.
C'est déjà mieux.
Reste les mouvements de tous les éléments quand on passe au-dessus (surtout quand il y a plus d'une ligne...)

Je vais voir s'il est possible de programmer un délai entre le moment où un élément reçoit l'event onOver et le moment où commence son animation... Mais je crois que je manque de bases. :?
10/02/2024, 17h44
NoSmoking
Citation:

Je vais voir s'il est possible de programmer un délai entre le moment

il n'est pas prévu de retard à l'animation mais juste un retard à la prise en compte du « startDrag » ce qui ne réglera pas ton souci.

Ce que tu peux restreindre c'est la surface de prise en compte du « over » sur les éléments.

Pour cela il y a les options
- invertSwap
- swapThreshold
- invertedSwapThreshold
... avec lesquels il te faudra joué en fonction de la direction, les deux, horizontal/vertical n'étant pas simultanés.

Ressource :
- Les Options SortableJS sur github.com/
16/03/2024, 23h38
Yobeco

C'est un peu mieux avec direction: "vertical", mais c'est quand-même bizarre qu'aucun délais ne soit possible. Je verrai à l'usage, avec les enfants, si c'est rédhibitoire.