Discussion :

[calitom]

Bonjour,

Je cherche a donner a l'utilisateur la possibilité de redimensionner en ligne un div.

En gros, je voudrais avoir le meme principe que celui qui s'applique aux images:
Quand on passe la souris sur le coin ou sur un côté du div, l'icone de redimension apparait, et permet la redimension du div en déplacant la souris...

J'ai compris le principe :
Il faut savoir a quelles coordonnées on est quand on clique, puis en faisant la différence avec les coordonnées quand on lache la souris on sait le deplacement effectué, puis on met a jour la balise style="width:; height:;" en fonction de ce déplacement...

Mais en pratique, je ne vois pas du tout comment m'y prendre!!

Merci d'avance pour vos réponses

[jypees]

oulaaa c'est beaucoup de chose.

Je sais meme pas par ou commencer On va tenter
Alors en premier lieu utilise onmousedown, onmousemove et onmouseup sur la window(global) en y associant une fonction (regarde addEventListener (firefox) et attachEvent(ie)).
Puis sur la fonction down tu recuperes l'objet fraichement selectionné (avec les evenements et target).
Puis apres c'est un travail assez complexe. Tout d'abord recuperer la position de la sourie puis de l'objet en cour (avec offset en javascript tu recuperes tout) et la tu fais tes calculs. Puis lors du onmousemove tu sets les valeurs de la sourie sur le div associé au coin voulu. Lors du on mouseup tu effaces toutes les valeurs globals eventuels
Pour que ton objet en cour soi accessible partout met le en global. J'espere que tu as deja fais du js car ca va te demander pas mal de fil a retordre mais si tu le fais c'est la classe
Voila tiens moi au courant si tu as d'autre question

[highman]

n'y a t'il pas quelque choses du coté de scriptaculous ??

[jypees]

Moi je suis un peu foufou je le recode moi meme Apres script aculous c'est un truc genial ! mais bon On est sur developpez.com

[calitom]

Je viens de regarder du coté de scriptaculous, mais il n'y a que des scripts de deplacement et pas de redimensionnement...

[jypees]

Franchement essait de le coder et puis je peux tenter de t'aider. Le desavantage de le coder soi meme c'est que c'est plutot long, la compatibilité entre navigateurs fait chier mais tu vas en sortir avec une excellente connaissance

[calitom]

J'ai trouvé ceci, mais je n'arrive pas à comprendre tout car je n'ai jamais utilisé les classes en javascript...
Comment je peux utiliser ceci pour me permettre de resizer mon div (comment faire appel à la fonction?...)

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
Effect.ResizeWindow = Class.create();
Object.extend(Object.extend(Effect.ResizeWindow.prototype, Effect.Base.prototype), {
  initialize: function(win, top, left, width, height) {
    this.window = win;
    this.window.resizing = true;
 
    var size = win.getSize();
    this.initWidth    = parseFloat(size.width);
    this.initHeight   = parseFloat(size.height);
 
    var location = win.getLocation();
    this.initTop    = parseFloat(location.top);
    this.initLeft   = parseFloat(location.left);
 
    this.width    = width != null  ? parseFloat(width)  : this.initWidth;
    this.height   = height != null ? parseFloat(height) : this.initHeight;
    this.top      = top != null    ? parseFloat(top)    : this.initTop;
    this.left     = left != null   ? parseFloat(left)   : this.initLeft;
 
    this.dx     = this.left   - this.initLeft;
    this.dy     = this.top    - this.initTop;
    this.dw     = this.width  - this.initWidth;
    this.dh     = this.height - this.initHeight;
 
    this.r2      = $(this.window.getId() + "_row2");
    this.content = $(this.window.getId() + "_content");
 
    this.contentOverflow = this.content.getStyle("overflow") || "auto";
    this.content.setStyle({overflow: "hidden"});
 
    // Wired mode
    if (this.window.options.wiredDrag) {
      this.window.currentDrag = win._createWiredElement();
      this.window.currentDrag.show();
      this.window.element.hide();
    }
 
    this.start(arguments[5]);
  },
 
  update: function(position) {
    var width  = Math.floor(this.initWidth  + this.dw * position);
    var height = Math.floor(this.initHeight + this.dh * position);
    var top    = Math.floor(this.initTop    + this.dy * position);
    var left   = Math.floor(this.initLeft   + this.dx * position);
 
    if (window.ie) {
      if (Math.floor(height) == 0)  
        this.r2.hide();
      else if (Math.floor(height) >1)  
        this.r2.show();
    }      
    this.r2.setStyle({height: height});
    this.window.setSize(width, height);
    this.window.setLocation(top, left);
  },
 
  finish: function(position) {
    // Wired mode
    if (this.window.options.wiredDrag) {
      this.window._hideWiredElement();
      this.window.element.show();
    }
 
    this.window.setSize(this.width, this.height);
    this.window.setLocation(this.top, this.left);
    this.r2.setStyle({height: null});
 
    this.content.setStyle({overflow: this.contentOverflow});
 
    this.window.resizing = false;
  }
});
 
Effect.ModalSlideDown = function(element) {
  var windowScroll = WindowUtilities.getWindowScroll();    
  var height = element.getStyle("height");  
  element.setStyle({top: - (parseFloat(height) - windowScroll.top) + "px"});
 
  element.show();
  return new Effect.Move(element, Object.extend({ x: 0, y: parseFloat(height) }, arguments[1] || {}));
};
 
 
Effect.ModalSlideUp = function(element) {
  var height = element.getStyle("height");
  return new Effect.Move(element, Object.extend({ x: 0, y: -parseFloat(height) }, arguments[1] || {}));
};