維新生活日記

   1: function GrabDragDropClass()

   2: {

   3:     this.mouse_x=0;

   4:     this.mouse_y=0;

   5:     this.drag_object_name = "";

   6:     this.old_zIndex = 0;

   7:     this.old_onmousedown = "";

   8:     this.target_name = "";

   9:     this.drag_trigger_name = "";

  10:     this.resize_trigger_name = "";

  11:     

  12:     this.initialize = function (target_name, drag_trigger_name, resize_trigger_name)

  13:     {

  14:         var this_class = this;

  15:     

  16:         this.target_name = target_name;

  17:         this.drag_trigger_name = drag_trigger_name;

  18:         this.resize_trigger_name = resize_trigger_name;

  19:         

  20:         $(this.target_name).onmouseover = function ()

  21:         {

  22:             this_class.on_mouse_over();

  23:         }

  24:         

  25:         $(this.drag_trigger_name).onmouseover = function ()

  26:         {

  27:             this.style.cursor='Hand';

  28:             this.title = "可拖曳小視窗";

  29:         }

  30:     

  31:         $(this.drag_trigger_name).onmouseout = function ()

  32:         {

  33:             this.style.cursor='default';

  34:         }

  35:     

  36:         $(this.drag_trigger_name).onmousedown = function ()

  37:         {

  38:             this_class.grab(this_class.target_name);

  39:         }

  40:         

  41:         if (this.resize_trigger_name != "")

  42:         {

  43:             $(this.resize_trigger_name).onmouseover = function ()

  44:             {

  45:                 this.style.cursor='se-resize';

  46:             }

  47:     

  48:             $(this.resize_trigger_name).onmouseout = function ()

  49:             {

  50:                 this.style.cursor='default';

  51:             }

  52:     

  53:             $(this.resize_trigger_name).onmousedown = function ()

  54:             {

  55:                 this_class.resize_grab(this_class.target_name);

  56:             }

  57:         }

  58:     }

  59:     

  60:     this.set_mouse_point = function ()

  61:     {

  62:         var mouse_point = this.get_mouse_point();

  63:         this.mouse_x = mouse_point[0];

  64:         this.mouse_y = mouse_point[1];

  65:     }

  66:     

  67:     this.get_mouse_point = function ()

  68:     {

  69:         if (chk_browser("FireFox") == true)

  70:             return (get_mouse_point());

  71:     

  72:         var point = new Array();

  73:         var e = window.event;

  74:         

  75:         if (e)

  76:         { 

  77:             if (e.pageX || e.pageY)

  78:             {

  79:                 point.push(e.pageX);

  80:                 point.push(e.pageY);

  81:             }

  82:             else if (e.clientX || e.clientY)

  83:             {

  84:                 point.push(e.clientX + document.body.scrollLeft);

  85:                 point.push(e.clientY + document.body.scrollTop);

  86:             }

  87:         }

  88:         

  89:         if (point[0] < 10)

  90:             point[0] = 10;

  91:  

  92:         if (point[1] < 10)

  93:             point[1] = 10;

  94:         

  95:         return (point);

  96:     }

  97:  

  98:     this.grab = function (obj_name)

  99:     {

 100:         var this_class = this;

 101:         var max_zIndex = this.get_max_zIndex();

 102:         var this_zIndex = parseInt($(this.target_name).style.zIndex, 10);

 103:         

 104:         if (this.before_grab() == false)

 105:             return (false);

 106:     

 107:         this.drag_object_name = obj_name;

 108:         this.set_mouse_point();

 109:  

 110:         if (this_zIndex <= max_zIndex)

 111:             $(this.target_name).style.zIndex = max_zIndex + 1;

 112:  

 113:         this.old_onmousedown = $(this.drag_trigger_name).onmousedown;

 114:         

 115:         document.onmousedown = function ()

 116:         {

 117:             return (false);

 118:         }

 119:  

 120:         document.onmousemove = function (_event)

 121:         {

 122:             if (chk_browser("Firefox"))

 123:                 FF_mouse_point(_event);

 124:                 

 125:             this_class.drag();

 126:             return (false);

 127:         }

 128:         

 129:         document.onmouseup = function ()

 130:         {

 131:             this_class.drop();

 132:             return (false);

 133:         }

 134:         

 135:         $(this.drag_trigger_name).onmousedown = function ()

 136:         {

 137:             return (false);

 138:         }

 139:         

 140:         if (this.on_grab() == false)

 141:             return (false);

 142:             

 143:         if (this.after_grab() == false)

 144:             return (false);

 145:         

 146:         return (false);

 147:     }

 148:  

 149:     this.drop = function ()

 150:     {

 151:         if (this.before_drop() == false)

 152:             return (false);

 153:     

 154:         try

 155:         {

 156:             this.drag_object_name = "";

 157:             $(this.drag_trigger_name).onmousedown = this.old_onmousedown;

 158:             document.onmousemove = null;

 159:             document.onmousedown = null;

 160:             document.onmouseup = null;

 161:             

 162:             if (chk_browser("Firefox"))

 163:                 document.onmousemove = FF_mouse_point;

 164:             

 165:             if (this.on_drop() == false)

 166:                 return (false);

 167:         }

 168:         catch (e)

 169:         {

 170:             return (false);

 171:         }

 172:         

 173:         if (this.after_drop() == false)

 174:             return (false);

 175:     }

 176:  

 177:     this.drag = function ()

 178:     {

 179:         var _obj = "";

 180:         var _diff_x, _diff_y;

 181:         var _obj_x, _obj_y;

 182:         var mouse_point = this.get_mouse_point();

 183:         

 184:         if (this.before_drag() == false)

 185:             return (false);

 186:     

 187:         try

 188:         {

 189:             _obj = $(this.drag_object_name)

 190:         }

 191:         catch (e)

 192:         {

 193:             this.drop();

 194:             return (false);

 195:         }

 196:     

 197:         if (this.drag_object_name == "")

 198:         {

 199:             this.drop();

 200:             return (false);

 201:         }

 202:     

 203:         _diff_x = mouse_point[0] - this.mouse_x;

 204:         _diff_y = mouse_point[1] - this.mouse_y;

 205:     

 206:         this.mouse_x = mouse_point[0];

 207:         this.mouse_y = mouse_point[1];

 208:     

 209:         _obj_x = parseInt(_obj.style.left, 10);

 210:         _obj_y = parseInt(_obj.style.top, 10);

 211:         

 212:         if (_obj_x < 10)

 213:             _obj_x = 10;

 214:             

 215:         if (_obj_y < 10)

 216:             _obj_y = 10;

 217:     

 218:         _obj.style.left = (_obj_x + _diff_x).toString(10) + 'px';

 219:         _obj.style.top = (_obj_y + _diff_y).toString(10) + 'px';

 220:         

 221:         if (this.on_drag() == false)

 222:             return (false);

 223:         

 224:         if (this.after_drag() == false)

 225:             return (false);

 226:         

 227:         return (false);

 228:     }

 229:     

 230:     this.on_grab = function ()

 231:     {

 232:     }

 233:     

 234:     this.before_grab = function ()

 235:     {

 236:     }

 237:     

 238:     this.after_grab = function ()

 239:     {

 240:     }

 241:  

 242:     this.on_drag = function ()

 243:     {

 244:     }

 245:     

 246:     this.before_drag = function ()

 247:     {

 248:     }

 249:     

 250:     this.after_drag = function ()

 251:     {

 252:         var _obj = $(this.target_name)

 253:         var _obj_x = parseInt(_obj.style.left, 10);

 254:         var _obj_y = parseInt(_obj.style.top, 10);

 255:         window.status = "layer(x, y) = (" + _obj_x + ", " + _obj_y + ") scrollTop=" + document.body.scrollTop + " scrollLeft=" + document.body.scrollLeft;

 256:     }

 257:     

 258:     this.on_drop = function ()

 259:     {

 260:         window.status = "";

 261:     }

 262:     

 263:     this.before_drop = function ()

 264:     {

 265:     }

 266:     

 267:     this.after_drop = function ()

 268:     {

 269:     }

 270:     

 271:     this.resize_grab = function (obj_name)

 272:     {

 273:         var this_class = this;

 274:         var max_zIndex = this.get_max_zIndex();

 275:         var this_zIndex = parseInt($(this.target_name).style.zIndex, 10);

 276:         

 277:         if (this.before_resize_grab() == false)

 278:             return (false);

 279:         

 280:         this.drag_object_name = obj_name;

 281:         this.set_mouse_point();

 282:         this.old_zIndex = $(this.target_name).style.zIndex;

 283:  

 284:         if (this_zIndex = max_zIndex)

 285:             $(this.target_name).style.zIndex = max_zIndex + 1;

 286:  

 287:         setOpacity(this.target_name, 3);

 288:  

 289:         this.drag_object_name = obj_name;

 290:         this.set_mouse_point();

 291:         

 292:         this.old_onmousedown = $(this.resize_trigger_name).onmousedown;

 293:         

 294:         $(this.resize_trigger_name).onmousedown = function ()

 295:         {

 296:             return (false);

 297:         }

 298:         

 299:         document.onmousedown = function ()

 300:         {

 301:             return (false);

 302:         }

 303:  

 304:         document.onmousemove = function ()

 305:         {

 306:             this_class.resize_drag();

 307:         }

 308:         

 309:         document.onmouseup = function ()

 310:         {

 311:             this_class.resize_drop();

 312:         }

 313:     

 314:         if (this.on_resize_grab() == false)

 315:             return (false);

 316:             

 317:         if (this.after_resize_grab() == false)

 318:             return (false);

 319:         

 320:         return (false);

 321:     }

 322:  

 323:     this.resize_drag = function ()

 324:     {

 325:         if (this.drag_object_name == "")

 326:             return (false);

 327:  

 328:         var _obj = $(this.target_name)

 329:         var _diff_x, _diff_y;

 330:         var _obj_x, _obj_y;

 331:         var mouse_point = this.get_mouse_point();

 332:     

 333:         _diff_x = mouse_point[0] - this.mouse_x;

 334:         _diff_y = mouse_point[1] - this.mouse_y;

 335:     

 336:         this.mouse_x = mouse_point[0];

 337:         this.mouse_y = mouse_point[1];

 338:     

 339:         _obj_x = parseInt(_obj.style.width, 10);

 340:         _obj_y = parseInt(_obj.style.height, 10);

 341:     

 342:         _obj.style.width = (_obj_x + _diff_x).toString(10) + 'px';

 343:         _obj.style.height = (_obj_y + _diff_y).toString(10) + 'px';

 344:         return (false);

 345:     }

 346:  

 347:     this.resize_drop = function ()

 348:     {

 349:         try

 350:         {

 351:             setOpacity(this.target_name, 10);

 352:             this.drag_object_name = "";

 353:             $(this.resize_trigger_name).onmousedown = this.old_onmousedown;

 354:             document.onmousemove = null;

 355:             document.onmousedown = null;

 356:             document.onmouseup = null;

 357:         }

 358:         catch (e)

 359:         {

 360:         }

 361:     }

 362:     

 363:     this.on_resize_grab = function ()

 364:     {

 365:     }

 366:     

 367:     this.before_resize_grab = function ()

 368:     {

 369:     }

 370:     

 371:     this.after_resize_grab = function ()

 372:     {

 373:     }

 374:  

 375:     this.on_resize_drag = function ()

 376:     {

 377:     }

 378:     

 379:     this.before_resize_drag = function ()

 380:     {

 381:     }

 382:     

 383:     this.after_resize_drag = function ()

 384:     {

 385:     }

 386:     

 387:     this.on_resize_drop = function ()

 388:     {

 389:     }

 390:     

 391:     this.before_resize_drop = function ()

 392:     {

 393:     }

 394:     

 395:     this.after_resize_drop = function ()

 396:     {

 397:     }

 398:     

 399:     this.on_mouse_over = function ()

 400:     {

 401:     }

 402:     

 403:     this.on_mouse_out = function ()

 404:     {

 405:     }

 406:     

 407:     this.get_max_zIndex = function ()

 408:     {

 409:         var max_zIndex = 0;

 410:         var _ele = document.getElementsByTagName("div");

 411:         

 412:         for (var i = 0; i < _ele.length; i++)

 413:         {

 414:             if (_ele[i].id != this.target_name)

 415:             {

 416:                 var this_zIndex = parseInt(_ele[i].style.zIndex, 10);

 417:                 if (this_zIndex > max_zIndex)

 418:                     max_zIndex = this_zIndex;

 419:             }

 420:         }

 421:         

 422:         return (max_zIndex);

 423:     }

 424: }