I am trying to use socket.io and node.js to allow 2 users to view a JQuery UI Sortable list at the same time. I want both users lists to update when one user makes a change.
Here is what I have now:
client.js
$("#layerColumn").on( "sortstop", function( event, ui ) {
// Send new list of layers to everyone
socket.emit('moveLayers', ui.item.attr('id'), ui.position);
});
socket.on('moveLayer', function(layer, position) {
$('#'+layer).offset(position);
$(".layerColumn").sortable( "refreshPositions" );
});
server.js
socket.on('moveLayers', function(layer, position) {
socket.broadcast.emit('moveLayer', layer, position);
});
This moves the items on the first users list, but doesn't reorder them on the second users list, it just places them in where the first user "dropped" them.
Any ideas? Thanks!
EDIT 05/08/2013:
Moved this to ANSWER.
If you know of any way to do this better, please let me know as I am still interested.
Moving EDIT to ANSWER (I hope that it is acceptable to answer my own question).
I remembered that the sortable is only looking at the items in the container, so using jQuery I could reorder the object according to an array.
I sent the sortable as an array over socket.io and re-appended all items in the sortable container for the second user.
client.js
$("#layerColumn").on( "sortstop", function( event, ui ) {
// Send new list of layers to everyone
socket.emit('moveLayers', $( "#layerColumn" ).sortable( "toArray" ));
});
socket.on('moveLayer', function(layers) {
console.log(layers);
$.each(layers, function() {
$("#"+this).appendTo("#layerColumn");
});
$("#layerColumn").sortable( "refresh" );
});
server.js
socket.on('moveLayers', function(layers) {
socket.broadcast.emit('moveLayer', layers);
});
Hope this is able to help someone else who encounters a similar problem.
If you know of any way to do this better, please let me know as I am still interested.