yosiat/app.js

## app.js
// When the document is ready to be manipulated..
$(document).ready(function(){
    // connect to sokcet io
    var socket = io.connect('http://localhost:1337');
    var $box = $("#box");

    $box.draggable({
        drag: function(){
            socket.emit("box_moved", {
                offsetTop : this.offsetTop,
                offsetLeft : this.offsetLeft
            });
        }
    });


    socket.on("box_moved", function(coordinates){
        console.log(coordinates);
        $box.css({
            left: coordinates.offsetLeft,
            top: coordinates.offsetTop || 0,
        });
    });

});

## index.html
<html>
<head>
    <title></title>
    <style type="text/css">
        div#box {
            width: 250px;
            height: 250px;
            background-color: green;

            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="http://localhost:1337/socket.io/socket.io.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

## server.js
var io = require('socket.io').listen(1337);

io.sockets.on('connection', function (socket) {
    socket.on('box_moved', function(coordinates){
        socket.broadcast.emit('box_moved', coordinates);
    });
});
	// When the document is ready to be manipulated..
	$(document).ready(function(){
	// connect to sokcet io
	var socket = io.connect('http://localhost:1337');
	var $box = $("#box");

	$box.draggable({
	drag: function(){
	socket.emit("box_moved", {
	offsetTop : this.offsetTop,
	offsetLeft : this.offsetLeft
	});
	}
	});


	socket.on("box_moved", function(coordinates){
	console.log(coordinates);
	$box.css({
	left: coordinates.offsetLeft,
	top: coordinates.offsetTop \|\| 0,
	});
	});

	});
	<html>
	<head>
	<title></title>
	<style type="text/css">
	div#box {
	width: 250px;
	height: 250px;
	background-color: green;

	position: absolute;
	left: 0;
	top: 0;
	}
	</style>
	</head>
	<body>
	<div id="box"></div>

	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
	<script src="http://localhost:1337/socket.io/socket.io.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>
	var io = require('socket.io').listen(1337);

	io.sockets.on('connection', function (socket) {
	socket.on('box_moved', function(coordinates){
	socket.broadcast.emit('box_moved', coordinates);
	});
	});