JAVASCRIPT   37
draggable
Guest on 27th August 2023 12:08:28 PM


  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.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.