1 //    常量
  2 var CELL_WIDTH    = 100;
  3 var CELL_HEIGHT = 50;
  4 
  5 var Utils = {
  6     pixelToInt: function(str)
  7     {
  8         return parseInt( str.replace("px", "") );
  9     }, 
 10     getTagLeft: function($tag)
 11     {
 12         return this.pixelToInt( $tag.css("left") );
 13     },
 14     getTagTop: function($tag)
 15     {
 16         return this.pixelToInt( $tag.css("top") );
 17     },
 18     getTagWidth: function($tag)
 19     {
 20         return this.pixelToInt( $tag.css("width") );
 21     },
 22     getTagHeight: function($tag)
 23     {
 24         return this.pixelToInt( $tag.css("height") );
 25     },
 26     setTagLeft: function($tag, x)
 27     {
 28         $tag.css("left", x + "px");
 29     },
 30     setTagTop: function($tag, y)
 31     {
 32         $tag.css("top", y + "px");
 33     },
 34     setTagWidth: function($tag, width)
 35     {
 36         $tag.css("width", width + "px");
 37     },
 38     setTagHeight: function($tag, height)
 39     {
 40         $tag.css("left", height + "px");
 41     },
 42     swapNode: function(ary, idx1, idx2)
 43     {
 44         var t = ary[idx1];
 45         ary[idx1] = ary[idx2];
 46         ary[idx2] = t;
 47     }
 48 };
 49 
 50 function Taskbar()
 51 {
 52     this._cells = [];
 53     this._frameTag = null;
 54     this._cellWidth = 0;
 55     this._cellHeight = 0;
 56     this._selNode = null;
 57     this._selIndex = -1;
 58 
 59     this._swapQueue = [];
 60     //    考虑优化.
 61     this._offsetPoint = {"x": 0, "y": 0};
 62 }
 63 
 64 Taskbar.prototype.getTag = function()
 65 {
 66     return this._frameTag;
 67 }
 68 
 69 Taskbar.prototype.init = function(x, y, width, height, rgb)
 70 {
 71     this._frameTag = $("<div></div>");
 72     this.setPosition(x, y);
 73     this.setContentSize(width, height);
 74     this.setBackgroundColor(rgb);
 75 
 76     var self = this;
 77     this._frameTag.bind("mousedown", {"bar": self}, this.mouseDown);
 78     this._frameTag.bind("mouseup", {"bar": self}, this.mouseUp);
 79     this._frameTag.bind("mousemove", {"bar": self}, this.mouseMove);
 80     // this._frameTag.bind("mouseout", {"bar": self}, this.mouseOut);
 81 }
 82 
 83 Taskbar.prototype.setPosition = function(x, y)
 84 {
 85     this._frameTag.css("position", "absolute");
 86     this._frameTag.css("left", x + "px");
 87     this._frameTag.css("top", y + "px");
 88 }
 89 
 90 Taskbar.prototype.setContentSize = function(width, height)
 91 {
 92     this._frameTag.css("width", width + "px");
 93     this._frameTag.css("height", height + "px");
 94 }
 95 
 96 Taskbar.prototype.setBackgroundColor = function(rgb)
 97 {
 98     //    rgb => "rgb(0, 0, 0)".
 99     this._frameTag.css("background", rgb);
100 }
101 
102 Taskbar.prototype.appendNode = function($node)
103 {
104     var frameWidth = Utils.getTagWidth( this._frameTag );
105     var frameHeight = Utils.getTagHeight( this._frameTag );
106     var length = this._cells.length + 1;
107     this._cellWidth = frameWidth / length;
108     this._cellHeight = frameHeight;
109     this._cells.push($node);
110     $node.appendTo( this._frameTag );
111 
112     for ( var i = 0; i != length; ++i )
113     {
114         Utils.setTagLeft( this._cells[i], i * this._cellWidth );
115         Utils.setTagWidth( this._cells[i], this._cellWidth);
116     }    
117 }
118 
119 Taskbar.prototype.mouseDown = function(e)
120 {
121     var bar = e.data["bar"];
122 
123     if ( bar._selNode )
124     {
125         return ;
126     }
127 
128     var index = bar.hitTest(e.clientX, e.clientY);
129     if ( !bar.isInvalidIndex(index) )
130     {
131         //    激活.
132         bar._selIndex = index;
133         bar._selNode = bar._cells[ index ];
134         bar._selNode.css("z-index", 99);
135         bar._cells[ index ] = null;
136 
137         //    保存偏移量, 保持鼠标拖动.
138         var point = bar.converPoint(e.clientX, e.clientY);
139         bar._offsetPoint.x = point.x - index * bar._cellWidth;
140         bar._offsetPoint.y = point.y;
141         console.log("down");
142     }
143 
144 }
145 
146 Taskbar.prototype.mouseUp = function(e)
147 {
148     var bar = e.data["bar"];
149 
150     if ( bar._selNode )
151     {
152         //    加入交换.
153         bar.appendSwap(bar._selNode, bar._selIndex);
154 
155         //    鼠标抬起后, 把选中的节点复位.
156         // bar._cells[ bar._selIndex ] = bar._selNode;
157         bar._cells[ bar._selIndex ].css("z-index", 1);
158         bar._selIndex = -1;
159         bar._selNode = null;
160         console.log("up");
161     }
162 }
163 
164 Taskbar.prototype.mouseOut = function(e)
165 {
166     var bar = e.data["bar"];
167     bar.mouseUp(e);
168     console.log("mouseout");
169 }
170 
171 Taskbar.prototype.mouseMove = function(e)
172 {
173     var bar = e.data["bar"];
174     if ( bar._selNode )
175     {
176         var point = bar.converPoint(e.clientX, e.clientY);
177         var moveX = point.x - bar._offsetPoint.x;
178 
179         //    防止位置溢出.
180         bar.noOverflow( bar._selNode, moveX );
181 
182         //    挤开旁边的 float block.
183         var curX = Utils.getTagLeft(bar._selNode),
184             width = Utils.getTagWidth(bar._selNode),
185             testX = curX + width / 2,
186             hitIndex = bar.hitTest(testX, 0);
187         if ( bar._selIndex != hitIndex )
188         {
189             bar.appendSwap(bar._cells[hitIndex], bar._selIndex);
190             bar._selIndex = hitIndex;
191         }
192     }
193 }
194 
195 Taskbar.prototype.appendSwap = function($node, index)
196 {
197     this._cells[index] = $node;
198 
199     this._swapQueue.push({"node": $node, "index": index});
200     this.resetNode();
201 }
202 
203 Taskbar.prototype.noOverflow = function($node, moveX)
204 {
205     var width = Utils.getTagWidth( $node ),
206         frameWidth = Utils.getTagWidth( this._frameTag );
207 
208     if (moveX < 0)
209         moveX = 0;
210     else if ( moveX + width > frameWidth )
211         moveX = frameWidth - width;
212 
213     Utils.setTagLeft( $node, moveX );
214 }
215 
216 Taskbar.prototype.resetNode = function()
217 {
218     var self = this;
219     var call = function($node, index)
220     {
221         var oldX = Utils.getTagLeft($node),
222             newX = index * self._cellWidth,
223             diff = newX - oldX,
224             stepCount = 10,
225             step = diff / stepCount,
226             curX = oldX;
227         (
228             function call()
229             {
230                 if ( stepCount != 0 )
231                 {
232                     curX += step;
233                     Utils.setTagLeft($node, curX);
234                     setTimeout(call, 10);
235                 }
236                 else
237                 {
238                     $node.css("z-index", 0);
239                     Utils.setTagLeft($node, newX);
240                 }
241                 --stepCount;
242             }
243         )();
244     };
245 
246     for (var i in this._swapQueue)
247     {
248         call(this._swapQueue[i].node, this._swapQueue[i].index);
249     }
250     this._swapQueue = [];
251 }
252 
253 Taskbar.prototype.hitTest = function(x, y)
254 {
255     //    y参数完全是个酱油.
256     var point = this.converPoint(x, y);
257     return parseInt(point.x / this._cellWidth);
258 }
259 
260 Taskbar.prototype.converPoint = function(x, y)
261 {
262     var frameX = Utils.getTagLeft( this._frameTag );
263         frameY = Utils.getTagTop( this._frameTag );
264     return {
265         "x": x -= frameX,
266         "y": y -= frameY
267     };
268 }
269 
270 Taskbar.prototype.isInvalidIndex = function(index)
271 {
272     return index < 0 || index >= this._cells.length;
273 }
274 
275 function init()
276 {
277     var getCell = function(cls, left, top, name)
278     {
279         return $(
280             "<div class=‘_cls‘ name=‘_name‘ style=‘left: _leftpx; top: _toppx; width: _widthpx; height: _heightpx;‘></div>"
281             .replace("_cls", cls)
282             .replace("_left", left)
283             .replace("_top", top)
284             .replace("_name", name)
285             .replace("_width", CELL_WIDTH)
286             .replace("_height", CELL_HEIGHT) );
287     };
288 
289     // for (var i = 0; i != 5; ++i)
290     // {
291     //     var taskbar = new Taskbar();
292     //     taskbar.init(0, i * 60, 500, 50, "rgb(0, 0, 0)");
293     //     taskbar.getTag().appendTo( $("body") );
294     //     for (var j = 0; j != i + 5; ++j)
295     //     {
296     //         taskbar.appendNode( getCell("cell", 0, 0, 0) );
297     //     }
298     // }
299 }
300 
301 $(document).ready(init);