[Change] javascript Drag and Drop

Mar 30 posted in Web (RSS), comments.
Advertisements
<html>   
  <head>   
  <title> Drag-and-drop effect  </title>   
  <style>   
  #idContainer{ 
      border:10px 
      solid #990000; 
      width:600px; 
      height:300px;
  }   
  #idDrag{ 
      border:5px solid #C4E3FD; 
      background:#C4E3FD; 
      width:50px; 
      height:50px;
      margin:50px;
  }   
  #idHandle{
      cursor:move; 
      height:25px; 
      background:#0000FF; 
      overflow:hidden;
  }   
  </style>   
  </head>   
  <body>   
  <script>   
  var isIE = (document.all) ? true : false; 
    
  var $ = function (id) 
  {   
      return "string" == typeof id ? document.getElementById(id) : id;   
  };  
   
  var Class = {   
      create: function() 
              {   
                  return function() 
                  { 
                     this.initialize.apply(this, arguments); 
                  }   
              }   
  }   
  
  var Extend = function(destination, source) 
  {   
      for (var property in source) 
      {   
          destination[property] = source[property];   
      }   
  }   
  
  var Bind = function(object, fun) 
  {   
      return function() 
      {   
          return fun.apply(object, arguments);   
      }   
  }   
  
  var BindAsEventListener = function(object, fun) 
  {   
      return function(event) 
      {   
          return fun.call(object, (event || window.event));   
      }   
  }  
   
  var CurrentStyle = function(element)
  {   
      return element.currentStyle || document.defaultView.getComputedStyle(element, null);   
  }   
  
  function addEventHandler(oTarget, sEventType, fnHandler) 
  {   
      if (oTarget.addEventListener) 
      {   
          oTarget.addEventListener(sEventType, fnHandler, false);   
      } 
      else if (oTarget.attachEvent) 
      {   
          oTarget.attachEvent("on" + sEventType, fnHandler);   
      } 
      else 
      {   
          oTarget["on" + sEventType] = fnHandler;   
      }   
  };   
  
  function removeEventHandler(oTarget, sEventType, fnHandler) 
  {   
      if (oTarget.removeEventListener) 
      {   
          oTarget.removeEventListener(sEventType, fnHandler, false);   
      } 
      else if (oTarget.detachEvent) 
      {   
          oTarget.detachEvent("on" + sEventType, fnHandler);   
      } 
      else 
      {    
        oTarget["on" + sEventType] = null;   
      }   
  };   
  // Drag and drop program     
  var Drag = Class.create();   
  Drag.prototype = {   
      // Drag and drop objects     
      initialize: function(drag, options) 
      {   
          this.Drag = $(drag);// Drag and drop objects     
          this._x = this._y = 0;// Record mouse relative position of the drag-and-drop object     
          this._marginLeft = this._marginTop = 0;// Records  margin   
          // The event object  ( Removes an event for the binding  )   
          this._fM = BindAsEventListener(this, this.Move);   
          this._fS = Bind(this, this.Stop);   
          this.SetOptions(options);   
          this.Limit = !!this.options.Limit;   
          this.mxLeft = parseInt(this.options.mxLeft);   
          this.mxRight = parseInt(this.options.mxRight);   
          this.mxTop = parseInt(this.options.mxTop);   
          this.mxBottom = parseInt(this.options.mxBottom);   
          this.LockX = !!this.options.LockX;   
          this.LockY = !!this.options.LockY;   
          this.Lock = !!this.options.Lock;   
          this.onStart = this.options.onStart;   
          this.onMove = this.options.onMove;   
          this.onStop = this.options.onStop;   
          this._Handle = $(this.options.Handle) || this.Drag;   
          this._mxContainer = $(this.options.mxContainer) || null;   
          this.Drag.style.position = "absolute";   
          // Transparent     
          if(isIE && !!this.options.Transparent)
          {   
              // Fill-and-drop object     
              with(this._Handle.appendChild(document.createElement("div")).style)
              {   
                  width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";   
              }   
          }   
          addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));   
      },   
      // Set default property     
      SetOptions: function(options) 
      {   
          this.options = 
          {
              // The default value     
              Handle:   "",// Set the trigger object  ( Do not set then use a drag-and-drop objects  )   
              Limit:   false,// The range restriction is set  ( Is true when the following parameters useful  , Can be negative  )   
              mxLeft:   0,// Left limit     
              mxRight:  9999,// Restrictions on the right     
              mxTop:   0,// The above limit     
              mxBottom:  9999,// Below the limit     
              mxContainer: "",// Specifies the limit within the container     
              LockX:   false,// If the lock horizontal drag-and-drop     
              LockY:   false,// If the lock vertical drop     
              Lock:   false,// If lock     
              Transparent: false,// If transparent     
              onStart:  function(){},// When you do begin to move     
              onMove:   function(){},// The move is performed when     
              onStop:   function(){}// When executed at the end of the move     
         };   
         Extend(this.options, options || {});   
      },   
      // Ready to drag     
      Start: function(oEvent) 
      {   
          if(this.Lock){ return; }   
          if(this.Limit)
          {   
              // Fixed error range parameter     
              this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);   
              this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);   
              // If you have a container must set position to  relative To relative positioning, and gets  offset Before you set the     
              !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");   
          }   
          // Record mouse relative position of the drag-and-drop object     
          this._x = oEvent.clientX - this.Drag.offsetLeft;   
          this._y = oEvent.clientY - this.Drag.offsetTop;   
          // Records  margin   
          this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;   
          this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;   
          //mousemove When you stop when you move the mouseup     
          addEventHandler(document, "mousemove", this._fM);   
          addEventHandler(document, "mouseup", this._fS);   
          if(isIE)
          {   
              // The focus is lost     
              addEventHandler(this._Handle, "losecapture", this._fS);   
              // Sets the mouse capture     
              this._Handle.setCapture();   
          }
          else
          {   
              // The focus is lost     
              addEventHandler(window, "blur", this._fS);   
              // To prevent the default action     
              oEvent.preventDefault();   
          };   
          // Additional program     
          this.onStart();   
      },   
      // Drag     
      Move: function(oEvent) 
      {   
          // Determining if lock     
          if(this.Lock){ this.Stop(); return; };   
          // Clear the selection     
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   
          // Set up your mobile parameters     
          var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;   
          // Set the range restriction     
          if(this.Limit)
          {   
              // Set the range parameter     
              var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;   
              // If you set the container, and then fix the range parameter     
              if(!!this._mxContainer)
              {   
                  mxLeft = Math.max(mxLeft, 0);   
                  mxTop = Math.max(mxTop, 0);   
                  mxRight = Math.min(mxRight, this._mxContainer.clientWidth);   
                  mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);   
              };   
              // Fixup parameters     
              iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);   
              iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);   
          }   
          // Set location, and modification  margin   
          if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }   
          if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }   
          // Additional program     
          this.onMove();   
      },   
      // Stop dragging     
      Stop: function() 
      {   
          // To remove an event     
          removeEventHandler(document, "mousemove", this._fM);   
          removeEventHandler(document, "mouseup", this._fS);   
          if(isIE)
          {   
              removeEventHandler(this._Handle, "losecapture", this._fS);   
              this._Handle.releaseCapture();   
          }
          else
          {   
              removeEventHandler(window, "blur", this._fS);   
          };   
          // Additional program     
          this.onStop();   
      }   
  };   
  </script>   
  <div>   
  <div><div></div></div>   
  </div>   
  <input type="button" value=" Reset  " />   
  <input type="button" value=" Lock  " />   
  <input type="button" value=" Locking level  " />   
  <input type="button" value=" Lock vertical  " />   
  <input type="button" value=" Range locks  " />   
  <input type="button" value=" Unlock  " />   
  <br />   
   Drag and drop State  :<span> Not started  </span>   
  <script>   
  var drag = new Drag("idDrag", 
  { mxContainer: "idContainer", Handle: "idHandle", Limit: true,   
  onStart: function(){ $("idShow").innerHTML = " Start a drag-and-drop  "; },   
  onMove: function(){ $("idShow").innerHTML = "left:"+this.Drag.offsetLeft+":top:"+this.Drag.offsetTop; },   
  onStop: function(){ $("idShow").innerHTML = " The end of the drag-and-drop  "; }   
  });   
  $("idReset").onclick = function()
  {   
      drag.Limit = true;   
      drag.mxLeft = drag.mxTop = 0;   
      drag.mxRight = drag.mxBottom = 9999;   
      drag.LockX = drag.LockY = drag.Lock = false;   
  }   
  $("idLock").onclick = function(){ drag.Lock = true; }   
  $("idLockX").onclick = function(){ drag.LockX = true; }   
  $("idLockY").onclick = function(){ drag.LockY = true; }   
  $("idLimit").onclick = function(){  drag.mxRight = drag.mxBottom = 200; }   
  $("idLimitOff").onclick = function(){ drag.Limit = false; }   
  </script>   
  </body>   
</html>