Discussion :

[SmoooX]

Bonjour à tous,
J'ai pour habitude de chercher des heures et des heures sur google quand je ne trouve pas les réponses à mes questions, mais en vain.

Je suis en train de développer un planning (du type DayPilot si l'on souhaite se faire une image).
Les évènements devront être resizable, c'est-à-dire que l'on devrait pouvoir cliquer sur le bas d'une div et maintenir le bouton enfoncé puis descendre le curseur vers le bas pour la redimensionner en height.
Sauf que : je ne souhaite pas que la valeur de height soit incrémenté d'1px à chaque fois que l'on descend la souris, mais de 15px. Cela correspond en fait à des quarts d'heure.

Le code d'une div d'évènement est le suivant :

Code html :

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

1
2
3
4
<div class="event" style="height:60px" draggable="true" id="1" onDragStart="start(event)">
<p>TEST - commentaire</p>
<div class="resizer-bottom"></div>
</div>

Ce sont des div qui sont draggable sur le calendrier pour info.
Quant à "resizer-bottom", il s'agit de la petite ligne sur laquelle on doit cliquer pour agrandir depuis le bas de la div.

Quelqu'un à t-il une idée ?

Merci d'avance.

[Doksuri]

code que j'ai trouve sur internet (j'ai juste ajoute le step a 15 -pour ton cas- )

Code html :

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

<div id="right_panel"></div>

Code css :

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
#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}
 
#right_panel::after {
    content: '';
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

Code javascript :

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
const BORDER_SIZE = 4;
const STEP = 15;
const panel = document.getElementById("right_panel");
 
let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  if(dx%STEP !== 0) {
  	return;
  }
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}
 
panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);
 
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

t'as un exemple la : jsfiddle.net/7od0bx5t/

[SmoooX]

Bonjour Doksuri, merci pour ta réactivité!

J'aimerais bien comprendre le code js que tu m'as donné.
Il n'a pas l'air de fonctionner mais c'est surement parce que la structure est différente de l'exemple que tu m'as donné.
Que signifie BORDER_SIZE et offsetX?

Merci

[SpaceFrog]

et reisizable css ne convienrait pas ?
https://www.w3schools.com/cssref/pla...val=horizontal

[SmoooX]

Bonjour SpaceFrog, malheureusement non. Je souhaite aller de 15px en 15px pour resize. Je souhaite aussi qu'il n'y ait que le bas de ma DIV qui se redimensionne.
J'aurais préféré, ça aurait été plus simple!