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: 150px; height: 20px; 
                   z-index:3; font-weight: bold;
                   border-style:solid; background: silver; }
      #status { x:10px; y:500px; width: 300px; height: 20px;
                background: black; color: silver;
                display:none;
              }
      #board { left:170px; top:0px; width: 800; height: 500;
               position: absolute; z-index:1;
                background: silver; color: black;
              }
    </style>
    <script type="text/javascript">

slogan(s)


  
  var idx = [0,0,0,0,0,0,0,0,0,0];
  var color = ['gray','white','red','orange','yellow','green','blue','violet','aqua','indigo'];
  var slogan = new Array();
  
  slogan[0] = ['in', 'every', 'scientist', 'is', 'a', '(hidden)', 'artist'];
  slogan[1] = ['craftmanship', '--', 'in', 'discovering', 'the', 'rethorics', 'of', 'the', 'material'];
  slogan[2] = ['social', 'processes', 'to', 'innovate', 'technology'];
  slogan[3] = ['exploratory', 'development', '--', 'to', 'discover', 'the', 'potential(s)', 'of', 'technology'];
  slogan[4] = ['everything', 'is', 'intertwinkled', '--', 'you', 'see/make', 'it', 'twinkle'];
  slogan[5] = ['creative', '(application of)', 'technology'];
  slogan[6] = ['in', 'every', 'scientist', 'there', 'is', 'an', 'artist,', 'in', 'every', 'artist', 'there', 'is', 'a', 'scientist'];
  slogan[7] = ['application(s)', '--', 'in', 'a', 'participatory', '(playful)', 'culture'];
  slogan[8] = ['technology', 'to', 'innovate', 'social', 'processes'];
  slogan[9] = ['imagination', '--', 'mixing', 'science', 'and', 'art'];

variable(s)


  
  
 see student-wave-nm1-index.htm

    var no = 0;
    var xPos = 0;
    var yPos = 0;

init


  
    function init() { 
    $(".draggable").each(function(x) {
    var id = this.attr('id');
    var no = this.attr('no');
    var x = parseInt(this.css('left'));
    var y = parseInt(this.css('top'));
    var text = this.html();
    // alert(id + " " + no + " " + x + "/" + y + " " + text );
    });
    //}
    //.post(<sample-jquery-state.php>, {action: "new", num: 0});
    }

send


  
    function send(number,name) {
       no++;
       // alert(name + " " + no + ":" + xPos + "/" + yPos);
       //var i = Math.floor((Math.random() * 100) % slogan[number].length;
       if (idx[number] >= slogan[number].length) idx[number] = 0;
       var phrase = slogan[number][idx[number]++]; // 'OK';
       $('#' + name).html(phrase).css('border-color',color[number]);
       $('body').css('background',color[number]);
       }
    </script>

jquery ready script 


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

fill database (fixed)


      init();

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);
      // });

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('no'),this.attr('id'));
      });
    });
    </script>
  </head>

body /with status & draggable 


  <body style="background:black; font-size: 120%">
    
  <div id="status"></div>
  
  <div no=0 id=marker-0 class=draggable>X0</div>
  <div no=1 id=marker-1 class=draggable>X1</div>
  <div no=2 id=marker-2 class=draggable>X2</div>
  <div no=3 id=marker-3 class=draggable>X3</div>
  <div no=4 id=marker-4 class=draggable>X4</div>
  <div no=5 id=marker-5 class=draggable>X5</div>
  <div no=6 id=marker-6 class=draggable>X6</div>
  <div no=7 id=marker-7 class=draggable>X7</div>
  <div no=8 id=marker-8 class=draggable>X8</div>
  <div no=9 id=marker-9 class=draggable>X9</div>

board 


  <div id=board>
  <iframe width=800 height=500 src=sample-js-draw.htm>
  </div>  
  
  </body>
  </html>