title: Using NowJS for Node.js with jQuery UI Draggable
body: <p>I started with the code found at this post: <a href="http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm" rel="nofollow">http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm</a>.</p>
  
  <p>I tried refactoring the html so that the example would use jQuery UI Draggable.  The code is pasted below; server side is unchanged.  It works fine, but there is an issue with flickering when dragging.  I assume this is a jQuery question, although I was thinking there might be a problem with the filtering on the server side?</p>
  
  <p>Also, I was wondering about how I might create an "initialPosition" function so that opening a new page would put the draggable div in the proper position.  I assume this is something that needs to be done on the server side, and ideally it would come from a database value that gets written after a drag ends.</p>
  
  <p>Also, beyond that I was wondering what the code would look like if I had multiple draggable items on a page.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;NowJS Draggable using jQuery UI&lt;/title&gt;
      &lt;style type="text/css"&gt;
          html, body { height: 100%; width: 100%; overflow: hidden; }
          #draggable { width: 150px; height: 150px; border: 1px solid black; }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/nowjs/now.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function() {
              $( "#draggable" ).draggable();          
              $( "#draggable" ).bind( "drag", function( event ) {
                  var newPosition = {
                      left: ( event.pageX ),
                      top: ( event.pageY ),
                  };
                  now.syncPosition( newPosition );
              });
              now.updatePosition = function( newPosition ){
                  $( "#draggable" ).css( newPosition );
              };
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="draggable"&gt;&lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>NODE.JS (comments stripped out)</p>
  
  <pre><code>var sys = require( "sys" );
  var http = require( "http" );
  var url = require( "url" );
  var path = require( "path" );
  var fileSystem = require( "fs" );
  
  var server = http.createServer(
      function( request, response ){
          fileSystem.readFile(
              __dirname+'/index.html',
              "binary",
              function( error, fileBinary ){
                  if (error){
                      response.writeHead( 404 );
                      response.end();
                      return;
                  }
                  response.writeHead( 200 );
                  response.write( fileBinary, "binary" );
                  response.end();
              }
          );
      }
  );
  
  server.listen( 8080 );
  
  (function(){
      var nowjs = require( "now" );
      var everyone = nowjs.initialize( server );
      var primaryKey = 0;
      everyone.connected(
          function(){
              this.now.uuid = ++primaryKey;
          }
      );
      everyone.now.syncPosition = function( position ){
          everyone.now.filterUpdateBroadcast( this.now.uuid, position );
      };
      everyone.now.filterUpdateBroadcast = function( masterUUID, position ){
          if (this.now.uuid == masterUUID){
              return;
          }
          everyone.now.updatePosition( position );
      };
  })();
  
  sys.puts( "Server is running on 8080" );
  </code></pre>