Question

我试图使用jquery创建一个待办事项列表，但它不起作用请有人告诉我我的代码有什么问题。我的输入工作正常，但是我的可排序函数，可拖动和可放置的功能不起作用。这是我的代码..

$(function() {
    
   $('#todoList ul').sortable({
       items: "li:not('.listTitle, .addItem')",
       connectWith: "ul",
       dropOnEmpty: true,
       placeholder: "emptySpace"
       
   });
    
    $('input').keydown(function(e) {
       if(e.keyCode == 13) {
           var item = $(this).val();
           
           $(this).parent().parent().append('<li>' + item + '</li>' ); 
           $(this).val('');
       } 
    });
    
    $('#trash').droppable({
       drop:function(event, ui) {
           ui.draggable.remove();
       } 
    });
});

/* Styles */

body{
    background: #eee;
    margin: 100px;
}

.container {
    position: relative;
    width: 400px;
    margin: 20px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    height: 600px;
    overflow: auto;
}


#todoListWrapper {
    width: 960px;
    text-align: center;
}

#todoList:after {
    clear: both;
    display: table;
    content: "";
}

ul {
    width: 48%;
    float: left;
    margin: 0;
    padding: 0 1%;
    list-style: none;
}


ul li:hover {
    background: #ddd;
    border-color: #aaa;
    cursor: pointer;
}

ul li:active{
    transform: rotate(3deg);
}

#todoList ul {
    width: 14.28%;
    margin: 0;
    padding: 0;
    position: relative;
}

#todoList li{
    background: none; 
    padding: 5px;
    border: none; 
    margin: 0; 
    text-align: left;
    font-size: 12px;
}

#todoList li:hover{
    background: #eee;
}

#todoList li.listTitle {
    background: #444;
    color: white;
    padding: 10px;
    text-align: center;
    border-right: solid 1px white;
    font-size: 14px;
}

#todoList li.listTitle:hover,
#todoList li.listTitle:active{
    cursor: default;
    transform: none;
}

#todoList .emptySpace{
    background: #fc3;
    border: dashed 1px #777;
    height: 10px;
}

#todoList li.addItem {
    display: none;
    position: absolute;
    top: 0;
    background: none;
}

#todoList ul:hover li.addItem {
    display: block;
}

#todoList li.addItem input {
    width: 100%;
    padding: 4px;
}

#todoList li.addItem:active {
    transform: none;
}

#trash {
    background: rgba(178,73,38,.7);
    margin:80px 280px;
    display: block;
    position: absolute;
    text-align: center;
    color: white;
    width: 400px;
    height: 200px;
}

<!DOCTYPE html>

<html>
    
    <head>
        
        <title>JQuery To-do List</title>
        
        <link rel="stylesheet" href="normalise.css">
         <link rel="stylesheet" href="dostyle.css">
        
        <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
                    
    </head>
     
    
    <body>
        
        <div class="container" id="todoListWrapper">
            <h2>JQuery TO-DO List</h2>
           <div id="todoList">
               <ul>
                   <li class="listTitle">Monday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Tuesday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Wednesday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Thrusday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Friday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Saturday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Sunday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               
            </div>
            
            <div id="trash" class="container">Drag items to delete</div>
        </div>
        
        
        <!-- Load CDN -->
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        
        <!-- Load local if CDN not available -->
        <script>window.jQuery || document.write('<script src="jquery-3.2.1.slim.js"><\/script>');</script> 
        
        <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
        
        <script type="text/javascript" src="app.js"></script> 
        
    </body> 
    
</html>

Answer 1

您的代码中存在错误。包装函数永远不会执行，它是一个匿名函数，你不会立即调用它。更改脚本如下，将其更改为IIFE。我通过在末尾添加（）来调用该函数。

$(function() {

   $('#todoList ul').sortable({
       items: "li:not('.listTitle, .addItem')",
       connectWith: "ul",
       dropOnEmpty: true,
       placeholder: "emptySpace"

   });

    $('input').keydown(function(e) {
       if(e.keyCode == 13) {
           var item = $(this).val();

           $(this).parent().parent().append('<li>' + item + '</li>' ); 
           $(this).val('');
       } 
    });

    $('#trash').droppable({
       drop:function(event, ui) {
           ui.draggable.remove();
       } 
    });
})();

我的jquery没有在我的待办事项列表中工作

1 个答案: