CODEFETCH™
            Examples
Cache of ch06/drag.html from
http://media.wiley.com/assets/1002/24/ajaxcode.zip
Source code below from:
Ajax For Dummies (For Dummies (Computer/Tech))
By Steve Ph.D. Holzner
Published 13 March, 2006
Average rating

      Powells     Alibris 

<html>
  <head>
    <title>Ajax Drag and Drop</title>

    <style type="text/css">
      #television {
        position:absolute;
        z-index:200;
        background: #FF0000;
        color:#0000FF;
      }
    
      #target {
        position:absolute;
        background: #00FF00;
        color:#000000;
      }
    </style>

    <script type="text/javascript">

      var offsetX, offsetY;
  
      function MouseEvent(e) 
      {
        if(e) {
          this.e = e; 
        } else {
          this.e = window.event; 
        }

        if(e.pageX) {
          this.x = e.pageX; 
        } else {
          this.x = e.clientX; 
        }

        if(e.pageY) {
          this.y = e.pageY; 
        } else {
          this.y = e.clientY; 
        }

        if(e.target) {
          this.target = e.target; 
        } else {
          this.target = e.srcElement;
        }
      }
  
      function addListener(type, callback) 
      {
        if (document.addEventListener) {
          document.addEventListener(type, callback, false);
        } else if (document.attachEvent) {
          document.attachEvent("on"+type, callback, false);
        }
      }
  
      function removeListener (type, callback) 
      {
        if (document.removeEventListener) {
          document.removeEventListener(type, callback, false);
        } else if (document.detachEvent) {
          document.detachEvent("on" + type, callback, false);
        }
      }
  
      function handleDown(e) 
      {
        var e = new MouseEvent(e);
        addListener("mousemove", handleMove);
        addListener("mouseup", handleUp);
        offsetX = e.x - parseInt(e.target.style.left);
        offsetY = e.y - parseInt(e.target.style.top);
        document.getElementById("targetDiv").innerHTML = "";
      }
    
      function handleMove(e) 
      {
        var e = new MouseEvent(e);
        var x = e.x - offsetX;
        e.target.style.left = x + "px";
        var y = e.y - offsetY;
        e.target.style.top = y + "px";
      }
    
      function handleUp(e) 
      {
        var e = new MouseEvent(e);
        removeListener("mousemove", handleMove);
        removeListener("mouseup", handleUp);

        var target = document.getElementById("target");
        var x = parseInt(target.style.left);
        var y = parseInt(target.style.top);
        var width = parseInt(target.style.width);
        var height = parseInt(target.style.height);

        if(e.x > x && e.x < x + width &&
          e.y > y && e.y < y + height){
          var XMLHttpRequestObject = false; 

          if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
          } else if (window.ActiveXObject) {
            XMLHttpRequestObject = new 
            ActiveXObject("Microsoft.XMLHTTP");
          }

          if(XMLHttpRequestObject) {
            XMLHttpRequestObject.open("GET", "text.txt"); 

            XMLHttpRequestObject.onreadystatechange = function() 
            { 
              if (XMLHttpRequestObject.readyState == 4 && 
                XMLHttpRequestObject.status == 200) { 
                  document.getElementById("targetDiv").innerHTML =
                    XMLHttpRequestObject.responseText;
                  delete XMLHttpRequestObject;
                  XMLHttpRequestObject = null;
              } 
            } 

            XMLHttpRequestObject.send(null); 
          }
        }
      }
    </script>
  </head>

  <body>
    <h1>Buy a television by dragging it to the shopping cart</h1>
      <div id="targetDiv"></div>

      <div id="television" 
        style="left:200px; top:100px; width:80px; height:80px;"
        onmousedown="handleDown(event);">Television</div>
   
      <div id="target" 
        style="left:300px; top:300px; width:200px; height:100px;">
        Shopping Cart</div>

  </body>
</html>