topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-jquery-draw.htm / htm



  <!DOCTYPE html>
  <html>
  <head>

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: 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: 90%; height: 100%;
               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 onload="init()" style="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=xboard>
    <style type="text/css">
    canvas {
      border: 1px solid black;
  /*
      left:120px; top:0px; width: 90%; height: 100%;
      position: absolute; z-index:1;
      background: silver; color: black;
  */
    }
    </style>
    <script language="javascript">
    function transform_event_coord(e) {
      return {x: e.clientX - 10, y: e.clientY - 10};
      //return {x: e.mouseX - 10, y: e.mouseY - 10};
    }
    var drawing = false;
    var lastpos = {x:-1,y:-1};
  
    function on_mousedown(e) {
      drawing = true;
      lastpos = transform_event_coord(e);
    }
    function on_mousemove(e) {
      if (!drawing)
        return;
    
      var pos = transform_event_coord(e);
    
      var canvas = document.getElementById("board");
      var ctx = canvas.getContext("2d");
    
      ctx.strokeStyle = "rgba(200,0,0,0.6)";
      ctx.lineWidth = 1.0;
      //ctx.lineJoin = "round";
      ctx.beginPath();
      ctx.moveTo(lastpos.x, lastpos.y);
      ctx.lineTo(pos.x, pos.y);
      ctx.closePath();
      ctx.stroke();
        
      lastpos = pos;
    }
    function on_mouseup(e) {
      drawing = false;
    }
    function init() {
      var canvas = document.getElementById("board");
      var ctx = canvas.getContext("2d");
    
      addEventListener("mousedown", on_mousedown, false);
      addEventListener("mousemove", on_mousemove, false);
      addEventListener("mouseup", on_mouseup, false);
    }
    </script>
  <canvas id="board"></canvas>
  </div>  
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.