0
Ich habe versucht, eine Liste zu tun mit jquery tun, aber es funktioniert nicht Bitte jemand sagen mir, was ist falsch mit meinem code.My Eingabe funktioniert gut, aber meine sortierbare Funktion, ziehbare und abwerfbaren Funktion funktioniert nicht .Hier mein Code ..Meine jquery arbeitet nicht in meiner To-Do-Liste
$(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>
Sie keine Anführungszeichen hier haben sollte: 'li: nicht ('listtitle, .addItem')' – Barmar