Div resizable assez "particulière"

Version imprimable

10/02/2022, 13h44
SmoooX

Div resizable assez "particulière"
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:

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.

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

Code:

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

Code:

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:

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/

10/02/2022, 15h12
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 ;)
10/02/2022, 15h12
SpaceFrog

et reisizable css ne convienrait pas ?
https://www.w3schools.com/cssref/pla...val=horizontal
10/02/2022, 15h15
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!