Fonction clique-glisser pour sélection multiple

Ipooo
Javascript NodeJS

Bonjour à tous!
Je suis en train de coder une fonction qui doit me permettre de sélectionner plusieurs div HTML tant que l'utilisateur presse la souris et glisse (hover) les divisions (un peu comme dans Google Calendar).

J'ai donc écrit cette fonction : 

async clickAndGliss(start,user) {
      let indexDay = this.dates.indexOf(start);
      if (indexDay >= 0 && indexDay <= 6) {
       var rows = $('tr[id="first-week"] td.day div[id="' + user.id + '"]');
       var mousedown;
       rows.mousedown(()=>{
          mousedown = true;
          console.log(mousedown)
        }).mouseup(()=>{
          mousedown = false;
        })
        if (mousedown) {
          rows.hover((row)=>{
          },
          (row)=>{
            if (row.target.className == "alert alert-success") {
              row.currentTarget.style.backgroundColor = "#9EC3A7"
            }
            if (row.target.className == "alert alert-success alert-danger") {
              row.currentTarget.style.backgroundColor = "#D6A9AD"
            }
            if (row.target.className == "alert alert-success alert-info") {
              row.currentTarget.style.backgroundColor = "#5F8DBE"
            } 
          })
        }
      }
    }

Cependant lorsque je fais : 

 if (mousedown) {
    console.log("test")
    //output rien
 }

 // par contre
 if (!mousedown) {
    console.log("test")
    //output test
}

Je pense que mon problème est dû à l'exécution asynchrone par défaut de Node et je connais le système de Promise - await, mais je vois pas comment le mettre en place dans cet exemple...

Si quelqu'un à une idée pour me sortir de là ça serait vraiment top !

Merci d'avance pour vos réponses! :)

Bonne journée à vous

4 réponses

Pandazaur

Bonjour,

Je ne connait que très peu jQuery, mais cette ligne:
var rows = $('tr[id="first-week"] td.day div[id="' + user.id + '"]');

devrait te renvoyer une liste d'éléments non ? Et pas un seul élément ?

Tu ne devrais pas faire quelques chose qui ressemble à ça ?

var rows = $('tr[id="first-week"] td.day div[id="' + user.id + '"]');

row.each((i, row) => {
    row
        .mousedown(()=>{
          mousedown = true;
          console.log(mousedown)
        })
        .mouseup(()=>{
          mousedown = false;
        })

        // ...
})
Ipooo
Auteur

Bonjour, merci pour ta réponse!
Exact, ça me renvoi plusieurs éléments mais c'est ce que je veux enfaite! Pour être plus précis je travaille sur un calendrier de gestion d'astreinte.
Là dans mon exemple, je souhaite sélectionné toute la ligne de la 1ère semaine pour l'intervenant sur lequel on clique (user.id)!
Je vourais ensuite que tant que la souris est pressée, on puisse sélectionné au survol les autres div de cet intervenant pour cette semaine précise!
Peut être qu'avec le code HTML (avec VueJS) sera plus parlant! : 

<tr id="first-week" class="row-week">
          <td class="day">
            <div class="alert alert-light" v-for="user in users" :item="user" :key="user.id">
              <label>{{ user.pnom.substr(0,1) + '.' + user.nom }}</label>
            </div>
          </td>
          <td :id="date._id" class="day" v-for="(date) in firstWeek" :item = "date" :key="date._id">
            <label class="day-label">{{date.day}}</label>
            <div :id="user.id" @mousedown="clickAndGliss(date,user)" class="alert" :class="['alert-success',{ 'alert-info': isConge(user, date), 'alert-danger': date.astreinte == user.id}]" v-for="(user) in users" :item= "user" :key="user._id">
            </div>
            <Popover :target="date._id"/>
          </td>
        </tr>
Pandazaur

Est-ce que ce code t'affiche quelque chose ?

var rows = $('tr[id="first-week"] td.day div[id="' + user.id + '"]');
console.log({ mousedown: rows.mousedown, mouseup: rows.mouseup }) // A appeler sans les "()", c'est juste pour controler que les fonctions existent bien
Ipooo
Auteur

C'est des fonctions de JQuery :)
https://api.jquery.com/mouseup/
https://api.jquery.com/mousedown/

console.log({ mousedown: rows.mousedown, mouseup: rows.mouseup })
//output {mousedown: ƒ, mouseup: ƒ}