使用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

您需要移动插座。On function to outside of handle drop function

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

套接字。方法创建一个侦听器，并且只需要创建一次。您可以在实例化套接字对象后立即调用它。

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