-2
我在获取可排序JQuery函数在我的文档中工作时遇到了一些困难。 我希望可以在列表之间拖放不同的作业，以及将作业从底部的抽屉拖到上面的列表中。可排序列表功能不起作用
我对任何乱码道歉：/这真的是我第一次用HTML，CSS和JQuery
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var h_bt = 0; //variable to keep track of the div#bottom condition.
$('a#handler_bottom').on('click', function(event){
event.preventDefault();
if(h_bt == 0){
//$('div#bottom').animate({top:'600px'}, 300);
//$('div#top').css({'background-color': 'red'});
$(this).parent().animate({top:'350px'}, 300);
$(this).css({'background-color': '#abadb4'});
h_bt = 1;
}else{
$(this).parent().animate({top:'460px'}, 300);
$(this).css({'background-color': '#abadb4'});
h_bt = 0;
}
});
var countContents = $('ul#contents li').length;
var widthContent = $('ul#contents li').width() + 100;
// stretch the contents width to contain all the <li> element
$('ul#contents').width(widthContent*countContents);
$('.move').on('click', function(event){
event.preventDefault();
var ind = $(this).index();
var move = -widthContent*ind +"px";
$('ul#contents').animate({left: move});
});
$('ul#menus li').on('click', function(event){
$('ul#menus li').css({'background-color':'#21253a'});
$(this).css({'background-color':'#1e1e36'});
});
$('.del').hide();
$(".delete").mouseenter(function() {
$(this).find('.del').show();
});
$(".delete").mouseleave(function() {
$(this).find('.del').hide();
});
//SORTABLE LISTS
$('.delete').click(function() {
$(this).parent("li").slideUp(200);
});
('.delete').mouseOver(
function() {
$('.del').show();
});
$(".connectable_list1").sortable({
connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
connectWith: '.connectedSortable',
});
});
</script>
<style type="text/css">
html, body{
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background: url(images/bkgd.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div#container{
position: relative;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
width:980px;
height:635px;
background-color: blue;
overflow:hidden;
}
div#top{
position:absolute;
top:0px;
left:165px;
width:815px;
height:60px;
background-color: #fff;
}
div#left{
position:absolute;
top:0px;
left:0px;
width:165px;
height:100%;
background-color: #21253a;
}
div#main{
position:absolute;
top:60px;
left:165px;
width:815px;
height:700px;
overflow: hidden;
background-color: #E8EBF0;
}
div#bottom{
position:absolute;
top:800px;
left:0px;
width:100%;
height:200px;
background-color: green;
}
a#handler_bottom{
position:absolute;
left:375px;
top:-25px;
width:50px;
height:50px;
border-radius: 50px;
background-color: #ccc;
}
#menus{
list-style: none;
position: absolute;
top:150px;
left:-50px;
}
#popup{
list-style: none;
position: absolute;
top:160px;
left:-50px;
}
#popup2{
list-style: none;
position: absolute;
top:349px;
left:-50px;
}
ul#popup li, ul#popup2 li{
width:160px;
padding:20px;
margin-bottom: 3px;
height:20px;
float:left;
text-align: center;
}
ul#contents{
list-style: none;
margin:0px;
padding:0px;
}
ul#menus li{
width:160px;
padding:20px;
margin-bottom: 0px;
height:20px;
background-color: #21253a;
font-family: Arial;
font-size: 12px;
float:left;
text-align: center;
border-top-style: solid;
border-top-color: #1e1e36;
border-top-width: 2px;
}
#menus a:link {
color: #929396;
text-decoration: none;
}
#menus a:visited {
color: #929396;
text-decoration: none;
}
ul#contents{
position:relative;
left:0;
}
ul#contents li.content{
width:815px;
height:400px;
left:0;
padding-right: 105px;
margin-top: 50px;
background-color: pink;
float:left;
position:relative;
}
.addnew{
border-bottom-style: solid;
border-bottom-color: #1e1e36;
border-bottom-width: 2px;
}
#icon{
position:absolute;
width:165px;
margin-top: 60px;
text-align: center;
}
#welcome{
position:absolute;
width:165px;
margin-top:30px;
text-align: center;
color:#929396;
font-family: Arial;
font-size: 12px;
}
#caldrop{
position: absolute;
left:35px;
top:18px;
width:47px;
height:20px;
}
.delete {
position:absolute;
left:0px;
top:0px;
padding-top:20px;
padding-left:10px;
height:50px;
margin-right:10px;
width:1%;
}
.delete:hover {
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
width:20%;
}
ul.connectable_list1, ul.connectable_list, ul.headings{
float:left;
list-style:none;
padding: 0;
margin-right:10px;
margin-left:10px;
}
.colcontent {
width:815px;
top:40px;
height:600px;
left:0;
padding-left: 30px;
background-color: #e8eaf0;
position:absolute;
overflow: hidden;
}
.connectable_list1 {
/* background:blue;*/
width:166px;
margin-bottom:50px;
}
.connectable_list2 {
/*background:red;*/
width:800px;
margin-bottom:50px;
padding-top:30px;
}
.todo {
clear:both;
}
.asgn {
list-style: none;
font-size: 12px;
margin-left: -10px;
float:left;
position: relative;
width:146px;
height:70px;
margin-bottom:2px;
margin-right:20px;
padding-left:30px;
padding-top:0px;
background-color:#FFF;
}
img {
border-radius: 100%;
float: left;
height:10px;
width:10px;
margin-top: 1px;
margin: 0 10px 15px 0;
}
p.title{
position:absolute;
float:left;
color:#777777;
font-size: 10px;
font-family: "brandon-grotesque",sans-serif;
font-weight: 500;
}
p.time{
position:absolute;
float:left;
top:19px;
font-size: 9px;
color: #777777;
font-family: "brandon-grotesque",sans-serif;
font-weight:300;
}
p.location{
position:absolute;
float:left;
margin-left: 77px;
top:19px;
font-size: 9px;
font-family: "brandon-grotesque",sans-serif;
font-weight:300;
color: #777777;
}
.td{
font-family:"Roboto";
font-weight:300;
font-size: 13px;
margin-left: -10px;
float:left;
position: relative;
width:146px;
height:60px;
margin-bottom:2px;
margin-right:20px;
padding-left:30px;
padding-top:10px;
background-color:#E8E8E8;
}
img {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
}
div#todo{
position:absolute;
top:460px;
left:0px;
width:100%;
height:200px;
background-color: #abadb4;
}
#handler_bottom{
position:absolute;
left:335px;
top:-22px;
width:50px;
height:50px;
border-radius: 50px;
background-color: #abadb4;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<!--<div id="caldrop"><img height="23" src="images/caldrop.png" width=
"47"></div>-->
</div><!--end of div#top-->
<div id="left">
<div id="welcome">
WELCOME, JON
</div>
<!--<div id="icon"><img height="62" src="images/jonicon.png" width=
"62"></div>-->
<ul id="menus">
<li class="move">
<a href="#">VIEW BY WEEK</a>
</li>
<li class="move">
<a href="#">VIEW BY CLASS</a>
</li>
<li class="addnew">
<a href="#">+ ADD NEW</a>
</li>
</ul>
</div><!--end of div#top-->
<div id="main">
<ul id="contents">
<li class="content">
<div class="colcontent">
<ul class="connectable_list1 connectedSortable">
<li class="asgn">
<span class='delete' style=
"background-color:#59738a"><a class="del" href=
'#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#83403d;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
</ul>
<ul class="connectable_list1 connectedSortable">
<li class="asgn">
<span class='delete' style=
"background-color:#59738a;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#605d71;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#b0a650;"><a class="del"
href='#'></a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
</ul>
<ul class="connectable_list1 connectedSortable">
<li class="asgn">
<span class='delete' style=
"background-color:#605d71;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#83403d;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#b0a650;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
</ul>
<ul class="connectable_list1 connectedSortable">
<li class="asgn">
<span class='delete' style=
"background-color:#605d71;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#b0a650;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
</ul>
<div>
<div id="todo">
<a href="#" id="handler_bottom"></a>
<ul class=
"connectable_list2 connectedSortable">
<li class="asgn">
<span class='delete' style=
"background-color:#605d71"><a class=
"del" href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:red;"><a class="del"
href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
<li class="asgn">
<span class='delete' style=
"background-color:#b0a650;"><a class=
"del" href='#'>x</a></span>
<p class="title">SKETCH IDEATIONS</p>
<p class="time"><img src=
"images/clock.png">10/7</p>
<p class="location"><img src=
"images/clock.png">Home</p>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="content">this view shows by week</li>
</ul>
</div><!--end of div#main-->
</div><!--end of div#container-->
</body>
</html>