Discussion :

[Beginner.]

Salut,

Je débute dans ce sujet (Drag&Drop) mais j'aimerais savoir si il est possible d'imposer une trajectoire à l’élément que l'on fait glisser... Oui je sais au premier abord c'est bizarre comme question puisque la trajectoire c'est l'utilisateur qui la fixe en déplaçant la souris mais en fait je voulais savoir si on pouvait imposer un axe, je m'explique :

Par exemple comme les onglets de certaines applications : tant que le déplacement (de la souris) selon l'axe y reste inférieur à une certaine valeur il est ignoré (le curseur de la souris se déplace mais pas l'onglet) du coup l'onglet se déplace selon l'axe x en fonction de la position x de la souris.

Je n'ai pas trouvé de démos concernant cela mais on peut par exemple voir cet effet avec les éléments de la barre des tâches de windows...

Merci.

[Beginner.]

J'ai vu que c'est possible de limiter le déplacement de plusieurs manières avec jQuery : http://jqueryui.com/draggable/#constrain-movement

Y aurait-il une solution en pure JS ?

[Invité]

Pourquoi le faire en pur JS, alors que la lib Jquery est standardisée ? Si tu dois collab avec quelqu'un, ce sera plus simple si vous utilisez la même lib

[Beginner.]

Ben déjà, je ne connais pas JQuery ensuite étant en phase d'apprentissage j'aime bien savoir comment fonctionnent les choses dans la mesure du raisonnable bien sûr, je ne peux pas tout comprendre non plus, ne serait-ce faute de temps... Sinon parfois je me dis aussi que c'est dommage d'utiliser une librairie alors que la solution sans est tout aussi simple...

Mais c'est vrai qu'il y a beaucoup de chose faites avec JQuery donc la question se reposera...

[Watilin]

Il y a actuellement deux manières de mettre en œuvre un drag&drop. L’une est l’API html5 avec son éventail d’évènements dragstart, dragover, etc. Elle est assez fastidieuse à utiliser (un « fucking disaster » si on en croit Peter-Paul Koch).

L’autre fait appel aux évènements mieux connus mousedown, mousemove, etc. et demande au développeur de faire une partie du travail à la main, notamment maintenir une variable pour savoir quel élément est en cours de déplacement, savoir si le bouton de la souris est toujours enfoncé, mettre à jour la position de l’élément, etc. C’est cette solution qui est utilisée par jQuery, car l’API html5 ne plaît pas à Peter-Paul Koch ne permet pas une compatibilité suffisamment large.

Examinons un bout du code du plugin draggable :

Code :

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
$.widget( "ui.draggable", $.ui.mouse, {
 
  …
 
  _generatePosition: function( event, constrainPosition ) {
 
    var … o = this.options, …
 
    …
 
      if ( o.axis === "y" ) {
        pageX = this.originalPageX;
      }
 
      if ( o.axis === "x" ) {
        pageY = this.originalPageY;
      }
    }
 
    return {
      top: (
 
        // The absolute mouse position
        pageY -
 
        // Click offset (relative to the element)
        this.offset.click.top -
 
        // Only for relative positioned nodes: Relative offset from element to offset parent
        this.offset.relative.top -
 
        // The offsetParent's offset without borders (offset + border)
        this.offset.parent.top +
        ( this.cssPosition === "fixed" ?
          -this.offset.scroll.top :
          ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
      ),
      left: (
 
        // The absolute mouse position
        pageX -
 
        // Click offset (relative to the element)
        this.offset.click.left -
 
        // Only for relative positioned nodes: Relative offset from element to offset parent
        this.offset.relative.left -
 
        // The offsetParent's offset without borders (offset + border)
        this.offset.parent.left +
        ( this.cssPosition === "fixed" ?
          -this.offset.scroll.left :
          ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
      )
    };

Sans avoir tous les détails on devine de quelle façon est contrainte la coordonnée css top ou left quand l’option axis est passée : elle est ramenée à la valeur initiale, qui a été stockée au préalable dans une variable. (Le stockage se fait dans la fonction interne _mouseStart.)

Si ton objectif est d’avoir une trajectoire un peu plus complexe qu’une ligne verticale ou horizontale, il faudra définir une fonction qui décrit ta trajectoire. Par exemple, pour une diagonale, tu devras utiliser la formule d’une droite, pour un arc de cercle, une équation de cercle, etc. Les matheux appellent ces formules des équations paramétriques, et généralement il suffit de chercher la formule, de la copier-coller et de l’adapter en code JS.

La principale difficulté, à mon avis, est de savoir comment interpréter la position du curseur quand il s’éloigne trop de la trajectoire, car c’est un peu une affaire de jugement personnel. Je t’invite à faire quelques essais et à revenir poser des questions si tu bloques

[Beginner.]

Merci. Oui je vais essayer de le faire comme ça mais je me suis heurté à une autre question pour laquelle j'ai d’ailleurs ouvert un autre fil : Savoir quel est l’élément survolé par l’élément que l'on fait glisser ?

Du coup je me demande si JQuery n'utilise pas l'api html5 (en particulier dragover) même pour cette question-là... Je me demande si le Drag&Drop existait avant l'api Html5 et si oui ils devaient bien avoir trouver une solution et c'est vrai que j'ai vu un exemple entier n'utilisant ni librairie ni l'api html5, ça doit être un vieil article mais il est instructif je trouve...

En tous cas je ne savais pas que certains contestaient cet api... Mais il y a peut-être des cas où on ne pourrait pas s'en passer ? Par exemple peut-être si le Drag&Drop se fait entre deux pages ou deux navigateurs ?

Encore merci.