git.sur5r.net Git - contagged/blob - scripts/interface/idrag.js

   1 /**
   2  * Interface Elements for jQuery
   3  * Draggable
   4  *
   5  * http://interface.eyecon.ro
   6  *
   7  * Copyright (c) 2006 Stefan Petre
   8  * Dual licensed under the MIT (MIT-LICENSE.txt)
   9  * and GPL (GPL-LICENSE.txt) licenses.
  10  */
  11
  12 /**
  13  * Create a draggable element with a number of advanced options including callback, Google Maps type draggables,
  14  * reversion, ghosting, and grid dragging.
  15  *
  16  * @name Draggable
  17  * @descr Creates draggable elements that can be moved across the page.
  18  * @param Hash hash A hash of parameters. All parameters are optional.
  19  * @option String handle (optional) The jQuery selector matching the handle that starts the draggable
  20  * @option DOMElement handle (optional) The DOM Element of the handle that starts the draggable
  21  * @option Boolean revert (optional) When true, on stop-drag the element returns to initial position
  22  * @option Boolean ghosting (optional) When true, a copy of the element is moved
  23  * @option Integer zIndex (optional) zIndex depth for the element while it is being dragged
  24  * @option Float opacity (optional) A number between 0 and 1 that indicates the opacity of the element while being dragged
  25  * @option Integer grid (optional) (optional) A number of pixels indicating the grid that the element should snap to
  26  * @option Array grid (optional) A number of x-pixels and y-pixels indicating the grid that the element should snap to
  27  * @option Integer fx (optional) Duration for the effect (like ghosting or revert) applied to the draggable
  28  * @option String containment (optional) Define the zone where the draggable can be moved. 'parent' moves it inside parent
  29  *                           element, while 'document' prevents it from leaving the document and forcing additional
  30  *                           scrolling
  31  * @option Array containment An 4-element array (left, top, width, height) indicating the containment of the element
  32  * @option String axis (optional) Set an axis: vertical (with 'vertically') or horizontal (with 'horizontally')
  33  * @option Function onStart (optional) Callback function triggered when the dragging starts
  34  * @option Function onStop (optional) Callback function triggered when the dragging stops
  35  * @option Function onChange (optional) Callback function triggered when the dragging stop *and* the element was moved at least
  36  *                          one pixel
  37  * @option Function onDrag (optional) Callback function triggered while the element is dragged. Receives two parameters: x and y
  38  *                        coordinates. You can return an object with new coordinates {x: x, y: y} so this way you can
  39  *                        interact with the dragging process (for instance, build your containment)
  40  * @option Boolean insideParent Forces the element to remain inside its parent when being dragged (like Google Maps)
  41  * @option Integer snapDistance (optional) The element is not moved unless it is dragged more than snapDistance. You can prevent
  42  *                             accidental dragging and keep regular clicking enabled (for links or form elements,
  43  *                             for instance)
  44  * @option Object cursorAt (optional) The dragged element is moved to the cursor position with the offset specified. Accepts value
  45  *                        for top, left, right and bottom offset. Basically, this forces the cursor to a particular
  46  *                        position during the entire drag operation.
  47  * @option Boolean autoSize (optional) When true, the drag helper is resized to its content, instead of the dragged element's sizes
  48  * @option String frameClass (optional) When is set the cloned element is hidden so only a frame is dragged
  49  * @type jQuery
  50  * @cat Plugins/Interface
  51  * @author Stefan Petre
  52  */
  53
  54 jQuery.iDrag =  {
  55         helper : null,
  56         dragged: null,
  57         destroy : function()
  58         {
  59                 return this.each(
  60                         function ()
  61                         {
  62                                 if (this.isDraggable) {
  63                                         this.dragCfg.dhe.unbind('mousedown', jQuery.iDrag.draginit);
  64                                         this.dragCfg = null;
  65                                         this.isDraggable = false;
  66                                         if(jQuery.browser.msie) {
  67                                                 this.unselectable = "off";
  68                                         } else {
  69                                                 this.style.MozUserSelect = '';
  70                                                 this.style.KhtmlUserSelect = '';
  71                                                 this.style.userSelect = '';
  72                                         }
  73                                 }
  74                         }
  75                 );
  76         },
  77         draginit : function (e)
  78         {
  79                 if (jQuery.iDrag.dragged != null) {
  80                         jQuery.iDrag.dragstop(e);
  81                         return false;
  82                 }
  83                 var elm = this.dragElem;
  84                 jQuery(document)
  85                         .bind('mousemove', jQuery.iDrag.dragmove)
  86                         .bind('mouseup', jQuery.iDrag.dragstop);
  87                 elm.dragCfg.pointer = jQuery.iUtil.getPointer(e);
  88                 elm.dragCfg.currentPointer = elm.dragCfg.pointer;
  89                 elm.dragCfg.init = false;
  90                 elm.dragCfg.fromHandler = this != this.dragElem;
  91                 jQuery.iDrag.dragged = elm;
  92                 if (elm.dragCfg.si && this != this.dragElem) {
  93                                 parentPos = jQuery.iUtil.getPosition(elm.parentNode);
  94                                 sliderSize = jQuery.iUtil.getSize(elm);
  95                                 sliderPos = {
  96                                         x : parseInt(jQuery.css(elm,'left')) || 0,
  97                                         y : parseInt(jQuery.css(elm,'top')) || 0
  98                                 };
  99                                 dx = elm.dragCfg.currentPointer.x - parentPos.x - sliderSize.wb/2 - sliderPos.x;
 100                                 dy = elm.dragCfg.currentPointer.y - parentPos.y - sliderSize.hb/2 - sliderPos.y;
 101                                 jQuery.iSlider.dragmoveBy(elm, [dx, dy]);
 102                 }
 103                 return jQuery.selectKeyHelper||false;
 104         },
 105
 106         dragstart : function(e)
 107         {
 108                 var elm = jQuery.iDrag.dragged;
 109                 elm.dragCfg.init = true;
 110
 111                 var dEs = elm.style;
 112
 113                 elm.dragCfg.oD = jQuery.css(elm,'display');
 114                 elm.dragCfg.oP = jQuery.css(elm,'position');
 115                 if (!elm.dragCfg.initialPosition)
 116                         elm.dragCfg.initialPosition = elm.dragCfg.oP;
 117
 118                 elm.dragCfg.oR = {
 119                         x : parseInt(jQuery.css(elm,'left')) || 0,
 120                         y : parseInt(jQuery.css(elm,'top')) || 0
 121                 };
 122                 elm.dragCfg.diffX = 0;
 123                 elm.dragCfg.diffY = 0;
 124                 if (jQuery.browser.msie) {
 125                         var oldBorder = jQuery.iUtil.getBorder(elm, true);
 126                         elm.dragCfg.diffX = oldBorder.l||0;
 127                         elm.dragCfg.diffY = oldBorder.t||0;
 128                 }
 129
 130                 elm.dragCfg.oC = jQuery.extend(
 131                         jQuery.iUtil.getPosition(elm),
 132                         jQuery.iUtil.getSize(elm)
 133                 );
 134                 if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') {
 135                         dEs.position = 'relative';
 136                 }
 137
 138                 jQuery.iDrag.helper.empty();
 139                 var clonedEl = elm.cloneNode(true);
 140
 141                 jQuery(clonedEl).css(
 142                         {
 143                                 display:        'block',
 144                                 left:           '0px',
 145                                 top:            '0px'
 146                         }
 147                 );
 148                 clonedEl.style.marginTop = '0';
 149                 clonedEl.style.marginRight = '0';
 150                 clonedEl.style.marginBottom = '0';
 151                 clonedEl.style.marginLeft = '0';
 152                 jQuery.iDrag.helper.append(clonedEl);
 153
 154                 var dhs = jQuery.iDrag.helper.get(0).style;
 155
 156                 if (elm.dragCfg.autoSize) {
 157                         dhs.width = 'auto';
 158                         dhs.height = 'auto';
 159                 } else {
 160                         dhs.height = elm.dragCfg.oC.hb + 'px';
 161                         dhs.width = elm.dragCfg.oC.wb + 'px';
 162                 }
 163
 164                 dhs.display = 'block';
 165                 dhs.marginTop = '0px';
 166                 dhs.marginRight = '0px';
 167                 dhs.marginBottom = '0px';
 168                 dhs.marginLeft = '0px';
 169
 170                 //remeasure the clone to check if the size was changed by user's functions
 171                 jQuery.extend(
 172                         elm.dragCfg.oC,
 173                         jQuery.iUtil.getSize(clonedEl)
 174                 );
 175
 176                 if (elm.dragCfg.cursorAt) {
 177                         if (elm.dragCfg.cursorAt.left) {
 178                                 elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x - elm.dragCfg.cursorAt.left;
 179                                 elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.cursorAt.left;
 180                         }
 181                         if (elm.dragCfg.cursorAt.top) {
 182                                 elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.cursorAt.top;
 183                                 elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.cursorAt.top;
 184                         }
 185                         if (elm.dragCfg.cursorAt.right) {
 186                                 elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x -elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.right;
 187                                 elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.oC.wb + elm.dragCfg.cursorAt.right;
 188                         }
 189                         if (elm.dragCfg.cursorAt.bottom) {
 190                                 elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom;
 191                                 elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom;
 192                         }
 193                 }
 194                 elm.dragCfg.nx = elm.dragCfg.oR.x;
 195                 elm.dragCfg.ny = elm.dragCfg.oR.y;
 196
 197                 if (elm.dragCfg.insideParent || elm.dragCfg.containment == 'parent') {
 198                         parentBorders = jQuery.iUtil.getBorder(elm.parentNode, true);
 199                         elm.dragCfg.oC.x = elm.offsetLeft + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.l : parentBorders.l);
 200                         elm.dragCfg.oC.y = elm.offsetTop + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.t : parentBorders.t);
 201                         jQuery(elm.parentNode).append(jQuery.iDrag.helper.get(0));
 202                 }
 203                 if (elm.dragCfg.containment) {
 204                         jQuery.iDrag.getContainment(elm);
 205                         elm.dragCfg.onDragModifier.containment = jQuery.iDrag.fitToContainer;
 206                 }
 207
 208                 if (elm.dragCfg.si) {
 209                         jQuery.iSlider.modifyContainer(elm);
 210                 }
 211
 212                 dhs.left = elm.dragCfg.oC.x - elm.dragCfg.diffX + 'px';
 213                 dhs.top = elm.dragCfg.oC.y - elm.dragCfg.diffY + 'px';
 214                 //resize the helper to fit the clone
 215                 dhs.width = elm.dragCfg.oC.wb + 'px';
 216                 dhs.height = elm.dragCfg.oC.hb + 'px';
 217
 218                 jQuery.iDrag.dragged.dragCfg.prot = false;
 219
 220                 if (elm.dragCfg.gx) {
 221                         elm.dragCfg.onDragModifier.grid = jQuery.iDrag.snapToGrid;
 222                 }
 223                 if (elm.dragCfg.zIndex != false) {
 224                         jQuery.iDrag.helper.css('zIndex', elm.dragCfg.zIndex);
 225                 }
 226                 if (elm.dragCfg.opacity) {
 227                         jQuery.iDrag.helper.css('opacity', elm.dragCfg.opacity);
 228                         if (window.ActiveXObject) {
 229                                 jQuery.iDrag.helper.css('filter', 'alpha(opacity=' + elm.dragCfg.opacity * 100 + ')');
 230                         }
 231                 }
 232
 233                 if(elm.dragCfg.frameClass) {
 234                         jQuery.iDrag.helper.addClass(elm.dragCfg.frameClass);
 235                         jQuery.iDrag.helper.get(0).firstChild.style.display = 'none';
 236                 }
 237                 if (elm.dragCfg.onStart)
 238                         elm.dragCfg.onStart.apply(elm, [clonedEl, elm.dragCfg.oR.x, elm.dragCfg.oR.y]);
 239                 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
 240                         jQuery.iDrop.highlight(elm);
 241                 }
 242                 if (elm.dragCfg.ghosting == false) {
 243                         dEs.display = 'none';
 244                 }
 245                 return false;
 246         },
 247
 248         getContainment : function(elm)
 249         {
 250                 if (elm.dragCfg.containment.constructor == String) {
 251                         if (elm.dragCfg.containment == 'parent') {
 252                                 elm.dragCfg.cont = jQuery.extend(
 253                                         {x:0,y:0},
 254                                         jQuery.iUtil.getSize(elm.parentNode)
 255                                 );
 256                                 var contBorders = jQuery.iUtil.getBorder(elm.parentNode, true);
 257                                 elm.dragCfg.cont.w = elm.dragCfg.cont.wb - contBorders.l - contBorders.r;
 258                                 elm.dragCfg.cont.h = elm.dragCfg.cont.hb - contBorders.t - contBorders.b;
 259                         } else if (elm.dragCfg.containment == 'document') {
 260                                 var clnt = jQuery.iUtil.getClient();
 261                                 elm.dragCfg.cont = {
 262                                         x : 0,
 263                                         y : 0,
 264                                         w : clnt.w,
 265                                         h : clnt.h
 266                                 };
 267                         }
 268                 } else if (elm.dragCfg.containment.constructor == Array) {
 269                         elm.dragCfg.cont = {
 270                                 x : parseInt(elm.dragCfg.containment[0])||0,
 271                                 y : parseInt(elm.dragCfg.containment[1])||0,
 272                                 w : parseInt(elm.dragCfg.containment[2])||0,
 273                                 h : parseInt(elm.dragCfg.containment[3])||0
 274                         };
 275                 }
 276                 elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oC.x;
 277                 elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oC.y;
 278         },
 279
 280         hidehelper : function(dragged)
 281         {
 282                 if (dragged.dragCfg.insideParent || dragged.dragCfg.containment == 'parent') {
 283                         jQuery('body', document).append(jQuery.iDrag.helper.get(0));
 284                 }
 285                 jQuery.iDrag.helper.empty().hide().css('opacity', 1);
 286                 if (window.ActiveXObject) {
 287                         jQuery.iDrag.helper.css('filter', 'alpha(opacity=100)');
 288                 }
 289         },
 290
 291         dragstop : function(e)
 292         {
 293
 294                 jQuery(document)
 295                         .unbind('mousemove', jQuery.iDrag.dragmove)
 296                         .unbind('mouseup', jQuery.iDrag.dragstop);
 297
 298                 if (jQuery.iDrag.dragged == null) {
 299                         return;
 300                 }
 301                 var dragged = jQuery.iDrag.dragged;
 302
 303                 jQuery.iDrag.dragged = null;
 304
 305                 if (dragged.dragCfg.init == false) {
 306                         return false;
 307                 }
 308                 if (dragged.dragCfg.so == true) {
 309                         jQuery(dragged).css('position', dragged.dragCfg.oP);
 310                 }
 311                 var dEs = dragged.style;
 312
 313                 if (dragged.si) {
 314                         jQuery.iDrag.helper.css('cursor', 'move');
 315                 }
 316                 if(dragged.dragCfg.frameClass) {
 317                         jQuery.iDrag.helper.removeClass(dragged.dragCfg.frameClass);
 318                 }
 319
 320                 if (dragged.dragCfg.revert == false) {
 321                         if (dragged.dragCfg.fx > 0) {
 322                                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') {
 323                                         var x = new jQuery.fx(dragged,{duration:dragged.dragCfg.fx}, 'left');
 324                                         x.custom(dragged.dragCfg.oR.x,dragged.dragCfg.nRx);
 325                                 }
 326                                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') {
 327                                         var y = new jQuery.fx(dragged,{duration:dragged.dragCfg.fx}, 'top');
 328                                         y.custom(dragged.dragCfg.oR.y,dragged.dragCfg.nRy);
 329                                 }
 330                         } else {
 331                                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally')
 332                                         dragged.style.left = dragged.dragCfg.nRx + 'px';
 333                                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically')
 334                                         dragged.style.top = dragged.dragCfg.nRy + 'px';
 335                         }
 336                         jQuery.iDrag.hidehelper(dragged);
 337                         if (dragged.dragCfg.ghosting == false) {
 338                                 jQuery(dragged).css('display', dragged.dragCfg.oD);
 339                         }
 340                 } else if (dragged.dragCfg.fx > 0) {
 341                         dragged.dragCfg.prot = true;
 342                         var dh = false;
 343                         if(jQuery.iDrop && jQuery.iSort && dragged.dragCfg.so) {
 344                                 dh = jQuery.iUtil.getPosition(jQuery.iSort.helper.get(0));
 345                         }
 346                         jQuery.iDrag.helper.animate(
 347                                 {
 348                                         left : dh ? dh.x : dragged.dragCfg.oC.x,
 349                                         top : dh ? dh.y : dragged.dragCfg.oC.y
 350                                 },
 351                                 dragged.dragCfg.fx,
 352                                 function()
 353                                 {
 354                                         dragged.dragCfg.prot = false;
 355                                         if (dragged.dragCfg.ghosting == false) {
 356                                                 dragged.style.display = dragged.dragCfg.oD;
 357                                         }
 358                                         jQuery.iDrag.hidehelper(dragged);
 359                                 }
 360                         );
 361                 } else {
 362                         jQuery.iDrag.hidehelper(dragged);
 363                         if (dragged.dragCfg.ghosting == false) {
 364                                 jQuery(dragged).css('display', dragged.dragCfg.oD);
 365                         }
 366                 }
 367
 368                 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
 369                         jQuery.iDrop.checkdrop(dragged);
 370                 }
 371                 if (jQuery.iSort && dragged.dragCfg.so) {
 372                         jQuery.iSort.check(dragged);
 373                 }
 374                 if (dragged.dragCfg.onChange && (dragged.dragCfg.nRx != dragged.dragCfg.oR.x || dragged.dragCfg.nRy != dragged.dragCfg.oR.y)){
 375                         dragged.dragCfg.onChange.apply(dragged, dragged.dragCfg.lastSi||[0,0,dragged.dragCfg.nRx,dragged.dragCfg.nRy]);
 376                 }
 377                 if (dragged.dragCfg.onStop)
 378                         dragged.dragCfg.onStop.apply(dragged);
 379                 return false;
 380         },
 381
 382         snapToGrid : function(x, y, dx, dy)
 383         {
 384                 if (dx != 0)
 385                         dx = parseInt((dx + (this.dragCfg.gx * dx/Math.abs(dx))/2)/this.dragCfg.gx) * this.dragCfg.gx;
 386                 if (dy != 0)
 387                         dy = parseInt((dy + (this.dragCfg.gy * dy/Math.abs(dy))/2)/this.dragCfg.gy) * this.dragCfg.gy;
 388                 return {
 389                         dx : dx,
 390                         dy : dy,
 391                         x: 0,
 392                         y: 0
 393                 };
 394         },
 395
 396         fitToContainer : function(x, y, dx, dy)
 397         {
 398                 dx = Math.min(
 399                                 Math.max(dx,this.dragCfg.cont.dx),
 400                                 this.dragCfg.cont.w + this.dragCfg.cont.dx - this.dragCfg.oC.wb
 401                         );
 402                 dy = Math.min(
 403                                 Math.max(dy,this.dragCfg.cont.dy),
 404                                 this.dragCfg.cont.h + this.dragCfg.cont.dy - this.dragCfg.oC.hb
 405                         );
 406
 407                 return {
 408                         dx : dx,
 409                         dy : dy,
 410                         x: 0,
 411                         y: 0
 412                 }
 413         },
 414
 415         dragmove : function(e)
 416         {
 417                 if (jQuery.iDrag.dragged == null || jQuery.iDrag.dragged.dragCfg.prot == true) {
 418                         return;
 419                 }
 420
 421                 var dragged = jQuery.iDrag.dragged;
 422
 423                 dragged.dragCfg.currentPointer = jQuery.iUtil.getPointer(e);
 424                 if (dragged.dragCfg.init == false) {
 425                         distance = Math.sqrt(Math.pow(dragged.dragCfg.pointer.x - dragged.dragCfg.currentPointer.x, 2) + Math.pow(dragged.dragCfg.pointer.y - dragged.dragCfg.currentPointer.y, 2));
 426                         if (distance < dragged.dragCfg.snapDistance){
 427                                 return;
 428                         } else {
 429                                 jQuery.iDrag.dragstart(e);
 430                         }
 431                 }
 432
 433                 var dx = dragged.dragCfg.currentPointer.x - dragged.dragCfg.pointer.x;
 434                 var dy = dragged.dragCfg.currentPointer.y - dragged.dragCfg.pointer.y;
 435
 436                 for (var i in dragged.dragCfg.onDragModifier) {
 437                         var newCoords = dragged.dragCfg.onDragModifier[i].apply(dragged, [dragged.dragCfg.oR.x + dx, dragged.dragCfg.oR.y + dy, dx, dy]);
 438                         if (newCoords && newCoords.constructor == Object) {
 439                                 dx = i != 'user' ? newCoords.dx : (newCoords.x - dragged.dragCfg.oR.x);
 440                                 dy = i != 'user' ? newCoords.dy : (newCoords.y - dragged.dragCfg.oR.y);
 441                         }
 442                 }
 443
 444                 dragged.dragCfg.nx = dragged.dragCfg.oC.x + dx - dragged.dragCfg.diffX;
 445                 dragged.dragCfg.ny = dragged.dragCfg.oC.y + dy - dragged.dragCfg.diffY;
 446
 447                 if (dragged.dragCfg.si && (dragged.dragCfg.onSlide || dragged.dragCfg.onChange)) {
 448                         jQuery.iSlider.onSlide(dragged, dragged.dragCfg.nx, dragged.dragCfg.ny);
 449                 }
 450
 451                 if(dragged.dragCfg.onDrag)
 452                         dragged.dragCfg.onDrag.apply(dragged, [dragged.dragCfg.oR.x + dx, dragged.dragCfg.oR.y + dy]);
 453
 454                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') {
 455                         dragged.dragCfg.nRx = dragged.dragCfg.oR.x + dx;
 456                         jQuery.iDrag.helper.get(0).style.left = dragged.dragCfg.nx + 'px';
 457                 }
 458                 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') {
 459                         dragged.dragCfg.nRy = dragged.dragCfg.oR.y + dy;
 460                         jQuery.iDrag.helper.get(0).style.top = dragged.dragCfg.ny + 'px';
 461                 }
 462
 463                 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){
 464                         jQuery.iDrop.checkhover(dragged);
 465                 }
 466                 return false;
 467         },
 468
 469         build : function(o)
 470         {
 471                 if (!jQuery.iDrag.helper) {
 472                         jQuery('body',document).append('<div id="dragHelper"></div>');
 473                         jQuery.iDrag.helper = jQuery('#dragHelper');
 474                         var el = jQuery.iDrag.helper.get(0);
 475                         var els = el.style;
 476                         els.position = 'absolute';
 477                         els.display = 'none';
 478                         els.cursor = 'move';
 479                         els.listStyle = 'none';
 480                         els.overflow = 'hidden';
 481                         if (window.ActiveXObject) {
 482                                 el.unselectable = "on";
 483                         } else {
 484                                 els.mozUserSelect = 'none';
 485                                 els.userSelect = 'none';
 486                                 els.KhtmlUserSelect = 'none';
 487                         }
 488                 }
 489                 if (!o) {
 490                         o = {};
 491                 }
 492                 return this.each(
 493                         function()
 494                         {
 495                                 if (this.isDraggable || !jQuery.iUtil)
 496                                         return;
 497                                 if (window.ActiveXObject) {
 498                                         this.onselectstart = function(){return false;};
 499                                         this.ondragstart = function(){return false;};
 500                                 }
 501                                 var el = this;
 502                                 var dhe = o.handle ? jQuery(this).find(o.handle) : jQuery(this);
 503                                 if(jQuery.browser.msie) {
 504                                         dhe.each(
 505                                                 function()
 506                                                 {
 507                                                         this.unselectable = "on";
 508                                                 }
 509                                         );
 510                                 } else {
 511                                         dhe.css('-moz-user-select', 'none');
 512                                         dhe.css('user-select', 'none');
 513                                         dhe.css('-khtml-user-select', 'none');
 514                                 }
 515                                 this.dragCfg = {
 516                                         dhe: dhe,
 517                                         revert : o.revert ? true : false,
 518                                         ghosting : o.ghosting ? true : false,
 519                                         so : o.so ? o.so : false,
 520                                         si : o.si ? o.si : false,
 521                                         insideParent : o.insideParent ? o.insideParent : false,
 522                                         zIndex : o.zIndex ? parseInt(o.zIndex)||0 : false,
 523                                         opacity : o.opacity ? parseFloat(o.opacity) : false,
 524                                         fx : parseInt(o.fx)||null,
 525                                         hpc : o.hpc ? o.hpc : false,
 526                                         onDragModifier : {},
 527                                         pointer : {},
 528                                         onStart : o.onStart && o.onStart.constructor == Function ? o.onStart : false,
 529                                         onStop : o.onStop && o.onStop.constructor == Function ? o.onStop : false,
 530                                         onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : false,
 531                                         axis : /vertically|horizontally/.test(o.axis) ? o.axis : false,
 532                                         snapDistance : o.snapDistance ? parseInt(o.snapDistance)||0 : 0,
 533                                         cursorAt: o.cursorAt ? o.cursorAt : false,
 534                                         autoSize : o.autoSize ? true : false,
 535                                         frameClass : o.frameClass || false
 536
 537                                 };
 538                                 if (o.onDragModifier && o.onDragModifier.constructor == Function)
 539                                         this.dragCfg.onDragModifier.user = o.onDragModifier;
 540                                 if (o.onDrag && o.onDrag.constructor == Function)
 541                                         this.dragCfg.onDrag = o.onDrag;
 542                                 if (o.containment && ((o.containment.constructor == String && (o.containment == 'parent' || o.containment == 'document')) || (o.containment.constructor == Array && o.containment.length == 4) )) {
 543                                         this.dragCfg.containment = o.containment;
 544                                 }
 545                                 if(o.fractions) {
 546                                         this.dragCfg.fractions = o.fractions;
 547                                 }
 548                                 if(o.grid){
 549                                         if(typeof o.grid == 'number'){
 550                                                 this.dragCfg.gx = parseInt(o.grid)||1;
 551                                                 this.dragCfg.gy = parseInt(o.grid)||1;
 552                                         } else if (o.grid.length == 2) {
 553                                                 this.dragCfg.gx = parseInt(o.grid[0])||1;
 554                                                 this.dragCfg.gy = parseInt(o.grid[1])||1;
 555                                         }
 556                                 }
 557                                 if (o.onSlide && o.onSlide.constructor == Function) {
 558                                         this.dragCfg.onSlide = o.onSlide;
 559                                 }
 560
 561                                 this.isDraggable = true;
 562                                 dhe.each(
 563                                         function(){
 564                                                 this.dragElem = el;
 565                                         }
 566                                 );
 567                                 dhe.bind('mousedown', jQuery.iDrag.draginit);
 568                         }
 569                 )
 570         }
 571 };
 572
 573 /**
 574  * Destroy an existing draggable on a collection of elements
 575  *
 576  * @name DraggableDestroy
 577  * @descr Destroy a draggable
 578  * @type jQuery
 579  * @cat Plugins/Interface
 580  * @example $('#drag2').DraggableDestroy();
 581  */
 582
 583 jQuery.fn.extend(
 584         {
 585                 DraggableDestroy : jQuery.iDrag.destroy,
 586                 Draggable : jQuery.iDrag.build
 587         }
 588 );