1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5 <head>
6 <title>Prova di selezione rettangolo</title>
7 <script src="http://www.prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
8
9 <script>
10
11 Event.observe(window, 'load',function() {
12
13 Event.observe(document, 'mousedown', MyDragger.OnMouseDown);
14 Event.observe(document, 'mouseup', MyDragger.OnMouseUp);
15 Event.observe(document, 'mousemove', MyDragger.OnMouseMove);
16 });
17
18 // cevrond 2007.05.11
19
20 var MyDragger = window.MyDragger || {};
21
22 MyDragger.PointClick = { x: -1, y: -1 };
23 MyDragger.Status = -1; // -1: not dragging, 0: clicked, 1: dragging
24 MyDragger.Targets = [];
25
26 MyDragger.OnMouseDown = function(e) {
27
28 MyDragger.Log('mouse', 'mousedown');
29
30 MyDragger.PointClick.x = Event.pointerX(e);
31 MyDragger.PointClick.y = Event.pointerY(e);
32
33 MyDragger.SetBox(MyDragger.PointClick.x, MyDragger.PointClick.y, -1, -1);
34 MyDragger.Status = 0;
35
36 var els = $$('div.pippo');
37 for (var i = 0, m = els.length ; i < m; i++) {
38
39 var el = els[i];
40
41 MyDragger.ElUnselect(el);
42
43 var xy = Position.cumulativeOffset(el);
44 var wh = el.getDimensions();
45
46 var t = { el: el, l: xy[0], t: xy[1], r: xy[0] + wh.width, b: xy[1] + wh.height, hl: false};
47
48 MyDragger.Targets[ MyDragger.Targets.length ] = t;
49 }
50
51 return false;
52 }
53
54 MyDragger.OnMouseUp = function(e) {
55
56 MyDragger.Log('mouse', 'mouseup');
57
58 MyDragger.Status = -1;
59 MyDragger.Targets = [];
60
61 return false;
62 }
63
64 MyDragger.OnMouseMove = function(e) {
65
66 var x = Event.pointerX(e);
67 var y = Event.pointerY(e);
68
69 MyDragger.Log('pointer', "X1: " + MyDragger.PointClick.x + " -- X2: " + x + " -- Y1: " + MyDragger.PointClick.y + " -- Y2: " + y);
70
71 var cw = Math.abs(MyDragger.PointClick.x - x);
72 var ch = Math.abs(MyDragger.PointClick.y - y);
73
74 // evita di cominciare la selezione se non si è mosso di almeno 2px
75
76 if (MyDragger.Status === 0 && (cw > 2 || ch > 2))
77 MyDragger.Status = 1;
78
79 if (MyDragger.Status === 1) {
80
81 var cl = Math.min(MyDragger.PointClick.x, x);
82 var ct = Math.min(MyDragger.PointClick.y, y);
83
84 MyDragger.SetBox(ct, cl, cw, ch);
85
86 var cb = ct + ch;
87 var cr = cl + cw;
88
89 for (var i = 0, m = MyDragger.Targets.length; i < m; i++) {
90
91 var d = MyDragger.Targets[i];
92
93 ((cl > d.r || cr < d.l || ct > d.b || cb < d.t) ? MyDragger.ElUnselect : MyDragger.ElSelect)(d.el);
94 }
95 }
96
97 return false;
98 }
99
100 // interazione con gli elementi
101
102 MyDragger.ElSelect = function(el) {
103
104 el.setStyle({backgroundColor:'red'});
105 }
106
107 MyDragger.ElUnselect = function(el) {
108
109 el.setStyle({backgroundColor:'transparent'});
110 }
111
112 // interazione col box di selezione
113
114 MyDragger.SetBox = function(t, l, w, h) {
115
116 var box = $('box');
117
118 if (w === -1 || h === -1)
119 box.setStyle({ display: 'none' });
120 else
121 box.setStyle({
122 display: '',
123 top: t + 'px',
124 left: l + 'px',
125 width: w + 'px',
126 height: h + 'px'
127 });
128 }
129
130 // per un po' di logging ...
131
132 MyDragger.Log = function(where, what) {
133
134 $(where).innerHTML = what;
135 }
136
137 </script>
138 </head>
139 <body>
140 <div id="debug_container" style="border: 1px red solid">
141 <div id="mouse"></div>
142 <div id="pointer"></div>
143 <div id="pippoc"></div>
144 <div id="rectc"></div>
145 </div>
146
147 <div id="box" style="border: 1px green solid; position: absolute;z-Index: 1000"></div>
148
149 <div id="pippo" class="pippo" style="position:absolute;left:200px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>
150 <div id="pippo2" class="pippo" style="position:absolute;left:300px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>
151 <div id="pippo3" class="pippo" style="position:absolute;left:400px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div>
152
153 </body>
154 </html>
