可排序列表功能不起作用

时间:2014-11-01 18:38:18

标签: jquery html css jquery-ui-sortable

我在使用可排序的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>

1 个答案:

答案 0 :(得分:0)

您的代码更改中存在一些错误:

('.delete').mouseOver(

要:

$('.delete').mouseover(

之后应该工作。我已经用fiddle代码来检查。


其他问题的注意事项是不要在问题中发布所有代码,只发布导致问题的部分。以及那些不起作用的东西和错误代码(如果有的话)。例如,我知道的唯一方法就是:undefined not a function就行了。例如,你可以只显示代码:

('.delete').mouseOver(

function () {
    $('.del').show();
});
$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});

在HTML和CSS中可能还有一个更简单的例子。大多数人都没有时间经历长代码块。