JAVASCRIPT   17

draggable-0.1.js

Guest on 9th June 2021 04:11:47 AM

  1. /**
  2.  * draggable - Class allows to make any element draggable
  3.  *
  4.  * Written by
  5.  * Egor Khmelev (hmelyoff@gmail.com)
  6.  *
  7.  * Licensed under the MIT (MIT-LICENSE.txt).
  8.  *
  9.  * @author Egor Khmelev
  10.  * @version 0.1.0-BETA ($Id$)
  11.  *
  12.  **/
  13.  
  14. (function( $ ){
  15.  
  16.   function Draggable(){
  17.       this._init.apply( this, arguments );
  18.   };
  19.  
  20.       Draggable.prototype.oninit = function(){
  21.        
  22.       };
  23.      
  24.       Draggable.prototype.events = function(){
  25.        
  26.       };
  27.      
  28.       Draggable.prototype.onmousedown = function(){
  29.             this.ptr.css({ position: "absolute" });
  30.       };
  31.      
  32.       Draggable.prototype.onmousemove = function( evt, x, y ){
  33.             this.ptr.css({ left: x, top: y });
  34.       };
  35.      
  36.       Draggable.prototype.onmouseup = function(){
  37.        
  38.       };
  39.  
  40.       Draggable.prototype.isDefault = {
  41.             drag: false,
  42.             clicked: false,
  43.             toclick: true,
  44.             mouseup: false
  45.       };
  46.  
  47.       Draggable.prototype._init = function(){
  48.             if( arguments.length > 0 ){
  49.                   this.ptr = $(arguments[0]);
  50.                   this.outer = $(".draggable-outer");
  51.  
  52.                   this.is = {};
  53.                   $.extend( this.is, this.isDefault );
  54.  
  55.                   var _offset = this.ptr.offset();
  56.                   this.d = {
  57.                         left: _offset.left,
  58.                         top: _offset.top,
  59.                         width: this.ptr.width(),
  60.                         height: this.ptr.height()
  61.                   };
  62.  
  63.                   this.oninit.apply( this, arguments );
  64.  
  65.                   this._events();
  66.             }
  67.       };
  68.      
  69.       Draggable.prototype._getPageCoords = function( event ){
  70.         if( event.targetTouches && event.targetTouches[0] ){
  71.           return { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY };
  72.         } else
  73.           return { x: event.pageX, y: event.pageY };
  74.       };
  75.      
  76.       Draggable.prototype._bindEvent = function( ptr, eventType, handler ){
  77.         var self = this;
  78.  
  79.         if( this.supportTouches_ )
  80.       ptr.get(0).addEventListener( this.events_[ eventType ], handler, false );
  81.        
  82.         else
  83.           ptr.bind( this.events_[ eventType ], handler );
  84.       };
  85.      
  86.       Draggable.prototype._events = function(){
  87.             var self = this;
  88.  
  89.     this.supportTouches_ = 'ontouchend' in document;
  90.     this.events_ = {
  91.       "click": this.supportTouches_ ? "touchstart" : "click",
  92.       "down": this.supportTouches_ ? "touchstart" : "mousedown",
  93.       "move": this.supportTouches_ ? "touchmove" : "mousemove",
  94.       "up"  : this.supportTouches_ ? "touchend" : "mouseup"
  95.     };
  96.  
  97.     this._bindEvent( $( document ), "move", function( event ){
  98.                   if( self.is.drag ){
  99.         event.stopPropagation();
  100.         event.preventDefault();
  101.                         self._mousemove( event );
  102.                   }
  103.             });
  104.     this._bindEvent( $( document ), "down", function( event ){
  105.                   if( self.is.drag ){
  106.         event.stopPropagation();
  107.         event.preventDefault();
  108.                   }
  109.             });
  110.     this._bindEvent( $( document ), "up", function( event ){
  111.                   self._mouseup( event );
  112.             });
  113.            
  114.     this._bindEvent( this.ptr, "down", function( event ){
  115.                   self._mousedown( event );
  116.                   return false;
  117.             });
  118.     this._bindEvent( this.ptr, "up", function( event ){
  119.                   self._mouseup( event );
  120.             });
  121.            
  122.             this.ptr.find("a")
  123.                   .click(function(){
  124.                         self.is.clicked = true;
  125.  
  126.                         if( !self.is.toclick ){
  127.                               self.is.toclick = true;
  128.                               return false;
  129.                         }
  130.                   })
  131.                   .mousedown(function( event ){
  132.                         self._mousedown( event );
  133.                         return false;
  134.                   });
  135.  
  136.             this.events();
  137.       };
  138.      
  139.       Draggable.prototype._mousedown = function( evt ){
  140.             this.is.drag = true;
  141.             this.is.clicked = false;
  142.             this.is.mouseup = false;
  143.  
  144.             var _offset = this.ptr.offset();
  145.             var coords = this._getPageCoords( evt );
  146.             this.cx = coords.x - _offset.left;
  147.             this.cy = coords.y - _offset.top;
  148.  
  149.             $.extend(this.d, {
  150.                   left: _offset.left,
  151.                   top: _offset.top,
  152.                   width: this.ptr.width(),
  153.                   height: this.ptr.height()
  154.             });
  155.  
  156.             if( this.outer && this.outer.get(0) ){
  157.                   this.outer.css({ height: Math.max(this.outer.height(), $(document.body).height()), overflow: "hidden" });
  158.             }
  159.  
  160.             this.onmousedown( evt );
  161.       };
  162.      
  163.       Draggable.prototype._mousemove = function( evt ){
  164.             this.is.toclick = false;
  165.             var coords = this._getPageCoords( evt );
  166.             this.onmousemove( evt, coords.x - this.cx, coords.y - this.cy );
  167.       };
  168.      
  169.       Draggable.prototype._mouseup = function( evt ){
  170.             var oThis = this;
  171.  
  172.             if( this.is.drag ){
  173.                   this.is.drag = false;
  174.  
  175.                   if( this.outer && this.outer.get(0) ){
  176.  
  177.                         if( $.browser.mozilla ){
  178.                               this.outer.css({ overflow: "hidden" });
  179.                         } else {
  180.                               this.outer.css({ overflow: "visible" });
  181.                         }
  182.  
  183.         if( $.browser.msie && $.browser.version == '6.0' ){
  184.          this.outer.css({ height: "100%" });
  185.         } else {
  186.          this.outer.css({ height: "auto" });
  187.         }  
  188.                   }
  189.  
  190.                   this.onmouseup( evt );
  191.             }
  192.       };
  193.      
  194.       window.Draggable = Draggable;
  195.  
  196. })( jQuery );

Raw Paste


Login or Register to edit or fork this paste. It's free.