Websocket：许多用户同时拖动一个项目答案

【问题标题】：Websocket: Many users drag one item at the same timeWebsocket：许多用户同时拖动一个项目
【发布时间】：2019-07-23 06:38:48
【问题描述】：

我正在使用 jquery 拖放和 websocket。当用户拖放项目时，它会在其他用户屏幕上自动更新。喜欢这个视频：https://youtu.be/JHndS1ps_f0

我希望用户拖动成员时，其他用户不能拖动该成员。这是我的代码：

var socket = new WebSocket('ws://' + window.location.host + '/ws');
var id_user = $(".id_user").attr('data-id');
    $(".item").draggable({
        revert: true,
        revertDuration: 0,
        drag: function( event, ui ) {
            var team_id_previous = $(this).attr('data-id-team');
            var member_id = $(this).attr('data-id-member');
            // Send to server
            socket.send(
                JSON.stringify({
                    team_id_previous: team_id_previous,
                    member_id: member_id,
                    user_id: id_user,
                    type: "drag"
                })
            );
        }
    });

从服务器收听消息：

socket.onmessage = function (e) {
        var msg = JSON.parse(e.data);
        var item = $("[data-id-member=" + msg.member_id + "][data-id-team=" + msg.team_id_previous + "]");
        if (msg.type === "drag" && msg.user_id != id_user) {
            item.draggable('disable');
            item.css("background-color", "gainsboro");
        }
};

如果我轮流拖动，在这个屏幕上拖动，然后在另一个屏幕上拖动，它会被禁用。但是，当多人同时拖动一个成员时，延迟几乎= 0，那么两个都可以拖动。我能做些什么来解决这个问题。谢谢。

【问题讨论】：

标签： jquery websocket drag-and-drop draggable drag

【解决方案1】：

让服务器通过记住每个可拖动对象的负责人来进行仲裁。当你收到拖拽消息时，通过查看拖拽者地图检查是否有其他人在拖拽它；如果不是当前用户，则发回取消消息（应该撤消拖动尝试），否则广播拖动。此外，如果相关的可拖动对象没有负责人，请输入当前用户（套接字 ID）作为其负责人。当拖动停止（或断开连接）时，删除相关的拖动者条目。

【讨论】：