[Change] javascript Drag and Drop

sponsored links
<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>  
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of [Change] javascript Drag and Drop

  • [Change] javascript Drag and Drop

    <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; }

  • javascript drag and drop, circle and rectangular

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u

  • Eclipse drag and drop (Drag and Drop) (change)

    Operating system is the most commonly used drag and drop movement of files to copy, drag and drop increased use of simple software. SWT also supports drag and drop, but more complicated programming. Figure 18.1 Schematic diagram of the realization of drag

  • Grid row drag and drop to change the order of

    <script> var meta = [ {header:' No. ',dataIndex:'id', name: 'id'}, {header:' Name ',dataIndex:'name', name: 'name'}, {header:' Description ',dataIndex:'descn', name: 'descn'}, {header:' Date ',dataIndex:'date', name: 'date', type: 'date', dateFormat

  • Free Drag and Drop Javascript Class

    Basic Drag and Drop new Dragdrop (( target drag element HTMLElemnt Required bridge specify which elements of the mouse when pressing start dragging, modal dialog box is used to achieve dragable whether the drag (true) by default dragX true / false fa

  • Based on jquery's Table Drag and Drop JQuery plugin

    Prior to the completion of the up and down in the list can not meet the user's needs. Too much time on that list, a grid cell for the next lot of trouble. So look for this plug-in. Table Drag and Drop JQuery plugin Official website: http://www.isocra.

  • Clipboard and OLE Drag and Drop

    First, the traditional clipboard Traditional form of the clipboard is very simple, the basic idea is to replicate when the replication process to the global memory copy of a data object, open the clipboard, and empty the clipboard data which will be copie

  • Flex 3 Getting Started (18): Building an advanced user interface, drag and drop support added

    In a typical visual development environment, you can select in the application and drag an object moving back and forth on the screen. Flex Drag and Drop Manager allows users to select an object, such as an element of List control, or a control such as Im

  • flex drag and drop operation (b)

    Easier to make money at home Manually add the drag-and-drop support In the last article in Flex, you already know there are some controls built-in drag-and-drop operations support, and relatively easy to achieve, but often have to complete this operation,

  • Js popup (supports drag and drop, multiple pop automatically switch level)

    Js popup Usage: 1, first import the css and js <script type="text/javascript" src="js/PopUpManager-compressed.js" ></script> <link href="css/PopUpLayer.css" type="text/css" rel="stylesheet"/> 2. Alert.show(el,modal,dragTitle); Alert.clos

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries