1

我正在尝试使用 socket.io 和 node.js 来允许 2 个用户同时查看 JQuery UI 可排序列表。我希望两个用户列表在一个用户进行更改时更新。

这是我现在拥有的：

客户端.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" );
});

服务器.js

socket.on('moveLayers', function(layer, position) {
    socket.broadcast.emit('moveLayer', layer, position);
});

这会移动第一个用户列表中的项目，但不会在第二个用户列表中重新排序它们，它只是将它们放置在第一个用户“丢弃”它们的位置。

有任何想法吗？谢谢！

编辑 05/08/2013：

将此移至答案。

如果您知道任何更好的方法，请告诉我，因为我仍然感兴趣。

4

1 回答 1

1

将 EDIT 移至 ANSWER（我希望回答我自己的问题是可以接受的）。

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

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

客户端.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" );
});

服务器.js

socket.on('moveLayers', function(layers) {
    socket.broadcast.emit('moveLayer', layers);
});

希望这能够帮助遇到类似问题的其他人。

如果您知道任何更好的方法，请告诉我，因为我仍然感兴趣。

于 2013-05-22T01:00:12.803 回答