Node.jsとsocket.ioを用いて1人のユーザが並べ替えを行った際に、両方のユーザのリストを更新したいと考えています。現在、以下のようなプログラムを作成しており、並べ替えを行ってもclient.htmlの $("#sortable").on( "sortstop", function(event.ui){ ~~ });
が実行されない状況です。このsortstopイベントが実行されない理由を教えていただけないでしょうか。また、他に改善点などがあればご指摘いただきたいです。以下にコードを記載しています。
server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.Server(app);
const io = socketIo(server);
const PORT = 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/client.html');
});
server.listen(PORT, () => {
console.log(`listening on port ${PORT}`);
});
io.on('connection', (socket) => {
console.log('connected');
socket.on('moveLayers', function(layers) {
socket.broadcast.emit('moveLayer', layers);
});
});
client.html
<!DOCTYPE html>
<html>
<head>
<title>並べ替え問題</title>
</head>
<body>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
//integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
//crossorigin="anonymous"></script>
<!-- jQuery UI -->
<script
src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
//integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
//crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
});
const socket = io();
$("#sortable").on( 'sortstop', function( event, ui ) {
// Send new list of layers to everyone
socket.emit('moveLayers', $( "#sortable" ).sortable( "toArray" ));
});
socket.on('moveLayer', function(layers) {
console.log(layers);
$.each(layers, function() {
$("#"+this).appendTo("#sortable");
});
$("#sortable").sortable( "refresh" );
console.log('sortable success!');
});
</script>
<ul id="sortable">
<li >項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>