default style & script(s)


    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

style(s) 


    <style type="text/css">
      .draggable { width: 100px; height: 15px; 
                   z-index:3;
                   border-style:solid; background: silver; }
      #status { x:10px; y:500px; width: 300px; height: 20px;
                background: black; color: silver;
                display:none;
              }
      #board { left:120px; top:0px; width: 800; height: 500;
               position: absolute; z-index:1;
                background: silver; color: black;
              }
    </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(name) {
       no++;
       // alert(name + " " + no + ":" + xPos + "/" + yPos);
       }
    </script>

jquery ready script 


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

drag handler


      
      // $(".draggable").({ zIndex: 2700 });
      $(".draggable").bind('drag', function(e, ui) {
      xPos = e.pageX; yPos = e.pageY;
      this.html(this.attr('id') + ": "  + e.pageX +', '+ e.pageY);
      // this.html(": " e.pageX +', '+ e.pageY);
      });

stop & update


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

body /with status & draggable 


  <body style="background:black; font-size:62.5%;">
    
  <div id="status"></div>
  
  <script type="text/javascript">

generate


  document.write("<div id=marker-1 class=draggable>X1</div>");
  document.write("<div id=marker-2 class=draggable>X2</div>");
  </script>
  <div id=board>
  <iframe width=800 height=500 src=sample-js-draw.htm>
  </div>  
  
  </body>
  </html>