library/js/jquery.easydrag.handler.beta2.js

   1 /**
   2 * EasyDrag 1.5 - Drag & Drop jQuery Plug-in
   3 *
   4 * Thanks for the community that is helping the improvement
   5 * of this little piece of code.
   6 *
   7 * For usage instructions please visit http://fromvega.com/scripts
   8 */
   9
  10 (function($){
  11
  12         // to track if the mouse button is pressed
  13         var isMouseDown    = false;
  14
  15         // to track the current element being dragged
  16         var currentElement = null;
  17
  18         // callback holders
  19         var dropCallbacks = {};
  20         var dragCallbacks = {};
  21
  22         // bubbling status
  23         var bubblings = {};
  24
  25         // global position records
  26         var lastMouseX;
  27         var lastMouseY;
  28         var lastElemTop;
  29         var lastElemLeft;
  30
  31         // track element dragStatus
  32         var dragStatus = {};
  33
  34         // if user is holding any handle or not
  35         var holdingHandler = false;
  36
  37         // returns the mouse (cursor) current position
  38         $.getMousePosition = function(e){
  39                 var posx = 0;
  40                 var posy = 0;
  41
  42                 if (!e) var e = window.event;
  43
  44                 if (e.pageX || e.pageY) {
  45                         posx = e.pageX;
  46                         posy = e.pageY;
  47                 }
  48                 else if (e.clientX || e.clientY) {
  49                         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  50                         posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
  51                 }
  52
  53                 return { 'x': posx, 'y': posy };
  54         };
  55
  56         // updates the position of the current element being dragged
  57         $.updatePosition = function(e) {
  58                 var pos = $.getMousePosition(e);
  59
  60                 var spanX = (pos.x - lastMouseX);
  61                 var spanY = (pos.y - lastMouseY);
  62
  63                 $(currentElement).css("top",  (lastElemTop + spanY));
  64                 $(currentElement).css("left", (lastElemLeft + spanX));
  65         };
  66
  67         // when the mouse is moved while the mouse button is pressed
  68         $(document).mousemove(function(e){
  69                 if(isMouseDown && dragStatus[currentElement.id] != 'false'){
  70                         // update the position and call the registered function
  71                         $.updatePosition(e);
  72                         if(dragCallbacks[currentElement.id] != undefined){
  73                                 dragCallbacks[currentElement.id](e, currentElement);
  74                         }
  75
  76                         return false;
  77                 }
  78         });
  79
  80         // when the mouse button is released
  81         $(document).mouseup(function(e){
  82                 if(isMouseDown && dragStatus[currentElement.id] != 'false'){
  83                         isMouseDown = false;
  84                         if(dropCallbacks[currentElement.id] != undefined){
  85                                 dropCallbacks[currentElement.id](e, currentElement);
  86                         }
  87
  88                         return false;
  89                 }
  90         });
  91
  92         // register the function to be called while an element is being dragged
  93         $.fn.ondrag = function(callback){
  94                 return this.each(function(){
  95                         dragCallbacks[this.id] = callback;
  96                 });
  97         };
  98
  99         // register the function to be called when an element is dropped
 100         $.fn.ondrop = function(callback){
 101                 return this.each(function(){
 102                         dropCallbacks[this.id] = callback;
 103                 });
 104         };
 105
 106         // disable the dragging feature for the element
 107         $.fn.dragOff = function(){
 108                 return this.each(function(){
 109                         dragStatus[this.id] = 'off';
 110                 });
 111         };
 112
 113         // enable the dragging feature for the element
 114         $.fn.dragOn = function(){
 115                 return this.each(function(){
 116                         dragStatus[this.id] = 'on';
 117                 });
 118         };
 119
 120         // set a child element as a handler
 121         $.fn.setHandler = function(handlerId){
 122                 return this.each(function(){
 123                         var draggable = this;
 124
 125                         // enable event bubbling so the user can reach the handle
 126                         bubblings[this.id] = true;
 127
 128                         // reset cursor style
 129                         $(draggable).css("cursor", "");
 130
 131                         // set current drag status
 132                         dragStatus[draggable.id] = "handler";
 133
 134                         // change handle cursor type
 135                         $("#"+handlerId).css("cursor", "move");
 136
 137                         // bind event handler
 138                         $("#"+handlerId).mousedown(function(e){
 139                                 holdingHandler = true;
 140                                 $(draggable).trigger('mousedown', e);
 141                         });
 142
 143                         // bind event handler
 144                         $("#"+handlerId).mouseup(function(e){
 145                                 holdingHandler = false;
 146                         });
 147                 });
 148         }
 149
 150         // set an element as draggable - allowBubbling enables/disables event bubbling
 151         $.fn.easydrag = function(allowBubbling){
 152
 153                 return this.each(function(){
 154
 155                         // if no id is defined assign a unique one
 156                         if(undefined == this.id || !this.id.length) this.id = "easydrag"+(new Date().getTime());
 157
 158                         // save event bubbling status
 159                         bubblings[this.id] = allowBubbling ? true : false;
 160
 161                         // set dragStatus
 162                         dragStatus[this.id] = "on";
 163
 164                         // change the mouse pointer
 165                         $(this).css("cursor", "move");
 166
 167                         // when an element receives a mouse press
 168                         $(this).mousedown(function(e){
 169
 170                                 // just when "on" or "handler"
 171                                 if((dragStatus[this.id] == "off") || (dragStatus[this.id] == "handler" && !holdingHandler))
 172                                         return bubblings[this.id];
 173
 174                                 // set it as absolute positioned
 175                                 $(this).css("position", "absolute");
 176
 177                                 // set z-index
 178                                 $(this).css("z-index", parseInt( new Date().getTime()/1000 ));
 179
 180                                 // update track variables
 181                                 isMouseDown    = true;
 182                                 currentElement = this;
 183
 184                                 // retrieve positioning properties
 185                                 var pos    = $.getMousePosition(e);
 186                                 lastMouseX = pos.x;
 187                                 lastMouseY = pos.y;
 188
 189                                 lastElemTop  = this.offsetTop;
 190                                 lastElemLeft = this.offsetLeft;
 191
 192                                 $.updatePosition(e);
 193
 194                                 return bubblings[this.id];
 195                         });
 196                 });
 197         };
 198
 199 })(jQuery);