Using NowJS for Node.js with jQuery UI Draggable
I started with the code found at this post: http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm.
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?
Also, I was wondering about how I might create an "initialPosition" function so that o开发者_运维知识库pening 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.
Also, beyond that I was wondering what the code would look like if I had multiple draggable items on a page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>NowJS Draggable using jQuery UI</title>
<style type="text/css">
html, body { height: 100%; width: 100%; overflow: hidden; }
#draggable { width: 150px; height: 150px; border: 1px solid black; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/></script>
<script type="text/javascript" src="/nowjs/now.js"></script>
<script>
$(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 );
};
});
</script>
</head>
<body>
<div id="draggable"></div>
</body>
</html>
NODE.JS (comments stripped out)
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" );
加载中,请稍侯......
精彩评论