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                 else237                 {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 -= frameY267     };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);