Fonction clique-glisser pour sélection multiple

Par Ipooo, il y a 6 ans

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, il y a 6 ans

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, il y a 6 ans

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, il y a 6 ans

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