0

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>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。