这是一个要使用HTML CSS和jQueryJQuery的待办事项清单项目
每次我补充一下列表向下移动,我不知道这是否是因为CSS或jQuery的,你可以做的项目名单看下面的代码来检查它,请帮助! 它总是试图与通过JQuery添加的新列表处于同一级别。
另外,当我做了一些验证,以便当用户什么都不输入它不会将它添加到列表中,这对周一工作,但所有其他日子,它不工作,即使我在script.js中使用标记
http://mohammadhalawi.6te.net/To%20Do%20List/Index.html
我上传网上,如果你想看看
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery MealPlaner</title>
<link rel="stylesheet" type="text/css" href="Normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="todoListWrapper">
<h1>The JQuery To Do List</h1>
<div id="todoList" class="clearfix">
<ul>
<li class="listTitle">Monday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Tuesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Wednesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Thursday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Friday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Saturday</li>
<li class="addItem">
<input type="text" class="inputItem" 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>
<div id="trash">
Drop Here!
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
window.jQuery || document.write('<script src="JQuery.js"><\/script>');
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS
body
{
background-color: darkgray;
}
#todoListWrapper
{
width: 960px;
text-align: center;
margin: 0 auto;
padding: 20px 10px 30px;
background: white;
}
.clearfix:after
{
content: "";
display: table;
clear: both;
}
#todoList ul
{
width: 133px;
margin: 0;
padding:0;
position: relative;
display: inline-block;
list-style: none;
}
#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;
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;
width: 120px;
}
#todoList li.addItem
{
display: none;
position: absolute;
top: 0;
background: none;
padding: 0;
width: 111px;
margin: 5px 4px;
}
#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,0.7);
height: 300px;
width: 400px;
position: relative;
top: 90px;
left: 35%;
line-height: 300px;
color: white;
font-weight: bold;
font-size: 18px;
text-align: center;
padding: 0;
}
SCRIPT
$(function()
{
$('#todoList ul').sortable({
items: "li:not('.listTitle, .addItem')",
connectWith:"ul",
dropOnEmpty:true,
placeholder: "emptySpace"
});
$('input').keydown(function(e){
if(e.keyCode == 13 && $('input').val()!="")
{
var item = $(this).val();
$(this).parent().parent().append('<li style="font-size:13px;cursor:pointer;display:block;">'+ item + '</li>');
$(this).val("");
}
});
$('#trash').droppable({
drop: function(event, ui)
{
ui.draggable.remove();
}
});
});
你有一份在线>?它总是更容易看到这个例子 –
不,但我可以给你的项目,再加上那是项目中的所有代码 –
我现在上传 –