Question

我正在使用WebSockets创建一个简单的待办事项列表。简单todo已创建，但我只是通过点击而不是应该具有的可拖动选项来创建它。我将点击更改为可拖动，但它没有工作。这是我用过的代码。

<!doctype html>
<html>
<head>
    <title>Simple Todo</title>
</head>
<body>

TODO <input type="text" id="newTodoItem">
<ul id="itemsTodo">

</ul>

PROGRESS
<ul id="itemsProgress">

</ul>

DONE
<ul id="itemsDone">

</ul>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect();

    /* statusses
     0: todo
     1: progress
     2: done
     */

    window.addEventListener('DOMContentLoaded', function () {
        socket.emit("submitNewTodoItemMessage", {});
    }, false);


    // Checks if a new toto item is submitted
    document.onkeyup = function (e) {
        if (e.which === 13) {
            var newTodoItem = {};
            newTodoItem.id = parseFloat(new Date().getTime() + Math.random());
            newTodoItem.status = 0;
            newTodoItem.action = document.getElementById("newTodoItem").value;
            if (newTodoItem !== '') {
                socket.emit("submitNewTodoItemMessage", newTodoItem);
            }
            document.getElementById("newTodoItem").value = "";
        }
    };


    socket.on("listOfAllTodoItemsMessage", function (listOfAllTodoItems) {
        var itemsTodo = [], itemsProgress = [], itemsDone = [];
        for (var i = 0; i < listOfAllTodoItems.length; i++) {

            var item = listOfAllTodoItems[i];

            var dragItem = "<li>" + item.action + " <span class='changeStatus' id='p_" + item.id + "'>^</span> <span class='changeStatus' id='n_" + item.id + "'>v</span></li>";

            if (listOfAllTodoItems[i].status === 0) {
                itemsTodo.push(dragItem);
            } else if (listOfAllTodoItems[i].status === 1) {
                itemsProgress.push(dragItem);
            } else if (listOfAllTodoItems[i].status === 2) {
                itemsDone.push(dragItem);
            }

            document.getElementById('itemsTodo').innerHTML = itemsTodo.join("");
            document.getElementById('itemsProgress').innerHTML = itemsProgress.join("");
            document.getElementById('itemsDone').innerHTML = itemsDone.join("");

        }

        $(".changeStatus").draggable(function (e) {
            socket.emit("submitStatusUpdateTodoItemMessage", e.target.id);
        });

        $(".changeStatus").css('cursor', 'pointer');
    });


</script>
</body>
</html>

代码段现在处于可拖动状态，但它不起作用。我使用jquery所以可拖动的功能应该可以工作。

Websockets可拖动而不是onclick

0 个答案: