使用 Socket io 拖放

Question

我正在使用 node、express 和 socket io 创建多人纸牌游戏。我无法将一位玩家的拖放操作传递到另一位已连接玩家的屏幕。

基本上我使用这个函数来处理客户端的拖放事件。我得到移动的卡的 ID，然后将它附加到它移动的 dropzone

function handleBoxDrop(e) {
    const id = e.dataTransfer.getData('text');
    let dropzone = e.target;
    socket.emit('drop', id);

    socket.on('drop', (id) => {
      let temp = document.getElementById(id);
      dropzone.appendChild(temp);
    });

    e.dataTransfer.clearData();
  }

在服务器端我使用了这个：

o.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('drop', (id) => {
    io.emit('drop', id);
  });
});

但是当我移动卡片时，卡片不会在其他浏览器上移动或移动到错误的位置。我不知道我做错了什么，请帮忙。谢谢:)

Answer 1

您需要将 socket.on 功能移动到 handle drop 功能之外

function handleBoxDrop(e) {
   '''your code'''
}

socket.on('drop', e => {
   '''append to dropzone'''
})

socket.on方法创建监听器，只需要创建一次。您可以在实例化套接字对象后立即调用它。

const socket = websocket()
socket.on('drop', e => {})

使用 Socket io 拖放

Drag and drop With Socket io

javascript

drag-and-drop

node.js

express

socket.io