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

  • 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

  • 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

  • eclipse Drag & Drop mechanism diagram (change)

    Requires, debug the eclipse of the drag & drop mechanism. Sorted out under the plan. eclipse has the complete package of local communication mechanisms up. Users who need to use the drag & drop features, only increasing the need for target co ...

  • js to achieve simple drag and drop

    The simplest implementation of js said drag and drop drag and drop, and now major, medium and small sites are essentially similar things, especially for pop-up layer drag, it is common mess. . . In fact, for pop-up layer, the initial aim is very simp

  • Flex using drag and drop

    All Flex components support drag and drop, some subset of the components also drag and drop with other functions, as these components can be achieved adding a property to drag and drop. Achieved in the Flex drag and drop in the use of drag and drop manage

  • 15 Jquery Drag and Drop plugin

    15 jQuery drag the plug-in allows you to move up the page with the mouse! $. Event.special.drag To achieve a simple drag functionality and compatibility! (Mb) ConteinersPlus ConteinersPlus jQuery is a powerful drag and drop plug-in, drag can be achie ...

  • Example AS3 Tutorial: Drag an instance of source collection.

    1.Drag and Drop in ActionScript 3.0 Creating drag and drop functionality in Flash CS3 is quite different than in older versions if you're using the new ActionScript 3.0. While still relatively straightforward, the code can be a little more intimidatin

  • 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,

  • Examples of drag and drop files Adobe Air

    Authors stress that, in the AIR drag and drop operation to use to achieve the label is DragManager, the principle is largely achieved the following steps: 1. When you drag a file to AIR applications, AIR applications by listening NativeDragEvent.NATIVE_DR

  • JavaScript, AJAX tree control Daquan (all kinds of TreeView Controls by JavaScript, AJAX)

    1, dTree 2, Treeview JavaScript 3, YUI Tree Panel Component with drag and Drop and more 4, Ajax drag'n Drop folder Tree by dhtmlgoodies.com [ Example Page ] 5, Update a Tree with Ajax by dhtmlgoodies.com [ Example Page ] 6, Static list based folder Tr

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