2013-05-08 65 views
1

我想使用socket.io和node.js来允许2个用户同时查看JQuery UI可排列列表。 我希望两个用户列表在一个用户进行更改时进行更新。Jquery UI索引变化的可重排序列表

这是我现在有:

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

这使第一用户列表上的项目,但不会重新排序他们在第二个用户名单上,它只是把他们放在第一个用户“放弃”他们的地方。

任何想法? 谢谢!

编辑2013年5月8日:

迁此回答。

如果您知道更好的方法,请让我知道,因为我仍然感兴趣。

回答

1

将编辑移动到答案(我希望回答我自己的问题是可以接受的)。

我记得可排序只查看容器中的项目,所以使用jQuery我可以根据数组重新排序对象。

我通过socket.io将排序作为数组发送,并将第二个用户的可排序容器中的所有项目重新添加。

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

希望这能帮助别人谁遇到了类似的问题。

如果您知道更好的方法,请让我知道,因为我仍然感兴趣。