[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>
分类:Web 时间:2010-03-30 人气:426
本文关键词:
分享到:
blog comments powered by Disqus

相关文章

  • javascript drag and drop, circle and rectangular 2010-10-20

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

  • Eclipse drag and drop (Drag and Drop) (change) 2010-04-01

    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

  • Grid row drag and drop to change the order of 2010-10-08

    <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 2010-09-13

    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 2010-04-26

    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 2010-08-05

    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

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

    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

  • flex drag and drop operation (b) 2010-11-04

    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 opera

  • Js popup (supports drag and drop, multiple pop automatically switch level) 2011-01-09

    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"/

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.134 (s). 12 q(s)