default style & script(s)


    <link type="text/css" href="../media/marker/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../media/marker/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../media/marker/ui.core.js"></script>
    <script type="text/javascript" src="../media/marker/ui.draggable.js"></script>

style(s) 


    <style type="text/css">
      #draggable { width: 100px; height: 70px; background: silver; }
      #monitor { width: 50px; height: 20px;
                 background: black; color: silver;
                 position:relative; left:40px; top:30px;
                 }
      #status { x:10px; y:500px; width: 300px; height: 20px;
                background: black; color: silver;
              }
    </style>
    <script type="text/javascript">

global variable(s)


  
 see student-wave-nm1-index.htm

    var no = 0;
    var xPos = 0;
    var yPos = 0;
    function send() {
       no++;
       alert(" " + no + ":" + xPos + "/" + yPos);
       }
    </script>

jquery ready script 


    <script type="text/javascript">
  
    document.ready(function(){
      $("#draggable").draggable();

drag handler


      $("#draggable").bind('drag', function(e, ui) {
      xPos = e.pageX; yPos = e.pageY;
      $("#monitor").html(e.pageX +', '+ e.pageY);
      });

stop & update


      $("#draggable").bind('dragstop', function(e, ui) {
      xPos = e.pageX; yPos = e.pageY;
      $("#status").html(e.pageX +', '+ e.pageY);
      send();
      });
    });
    </script>
  </head>

body /with status & draggable 


  <body style="font-size:62.5%;">
    
  <div id="status"></div>
  
  <div id="draggable">drag me &amp;
  <a href="javascript:send()"> click me</a>
  <div id="monitor"> </div>
  <div id="info"> </div>
  </div>
  
  </body>
  </html>