Question

我以这种方式使用jQuery有点新鲜，所以请耐心等待我。我搜索了我的问题的答案，但没有看到我看起来可能，因为我没有搜索正确的条款。所以这是我的问题。

我有两个div并排。在左边div我有按钮，我拖动到正确的div。我在我的css中设置了预定义的动画，我想在右栏中触发，同时在左侧留下可拖动按钮的克隆。我的动画工作正常，但不是在左栏中留下一个克隆，而是在我的动画顶部右侧克隆我的按钮。我不确定我在这里做错了什么。这是我一直在使用的代码。

HTML

<body>
    <div class="wrapper">
        <div id="hide-overflow">
            <ul id="all-colls-list" class="droptrue ui-sortable">
                <li id="music" class="sortedli"><a href="##"><img src="img/icon-music.svg" /></a></li>
                <li id="nav" class="sortedli"><a href="##"><img src="img/icon-nav.svg" /></a></li>
                <li id="climate" class="sortedli"><a href="##"><img src="img/icon-seats.svg" /></a></li>
                <li id="phone" class="sortedli"><a href="##"><img src="img/icon-phone.svg" /></a></li>
                <li id="weather" class="sortedli"><a href="##"><img src="img/icon-weather.svg" /></a></li>
                <li id="email" class="sortedli"><a href="##"><img src="img/icon-email.svg" /></a></li>
                <li id="calendar" class="sortedli"><a href="##"><img src="img/icon-calendar.svg" /></a></li>
            </ul>
            <div id="sortable" class="stage ui-state-highlight">
                <div id="frame">
                    <ul id="coll-selected-list" class="droptrue ui-sortable"></ul>
                </div>
            </div>
        </div>
    </div>
</body>

的jQuery

<script type="text/javascript">
    var lists = [{
        "listid": "#all-colls-list",
        "connectid": "#coll-selected-list"
    }, {
        "listid": "#coll-selected-list",
        "connectid": "#all-colls-list"
    }];
$.each(lists, function(i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        opacity: 0.7,
        start: function(event, ui) {
            if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).addClass('dropped');
            }

            else {
                $(ui.item).addClass('sorted');
            }
        },
        stop: function(event, ui) {
            if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).switchClass('dropped', 'sortedli');
            }
            else if ($("#music").addClass('droppedmusic').length > 1) {;
                                                                      }
            else if ($("#nav").addClass('droppednav').length > 1) {
            }
            else if ($("#climate").addClass('droppedclimate').length > 1) {
            } 
            else if ($("#phone").addClass('droppedphone').length > 1) {
            }
            else if ($("#weather").addClass('droppedweather').length > 1) {
            }
            else if ($("#email").addClass('droppedemail').length > 1) {
            }
            else if ($("#calendar").addClass('droppedlicalendar').length > 1) {
            }
            else {
                $(ui.item).switchClass('sortedli', 'droppedli');
            }
        }
    });
});
</script>

CSS

<style type="text/css">

#all-colls-list{
    display:inline-block;
    height:auto;
}

#coll-selected-list{
    display:inline-block;
    overflow: hidden;
    width: 600px;
    height: 480px;
}


img. {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
} 

#coll-selected-list li{
    background: #2d2d2d;
    overflow: hidden;
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 
    animation-duration: 1.0s;   
    -webkit-animation-duration: 1.0s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
    padding: 0px;
    margin: 0px;
}

#all-colls-list-map li, #coll-selected-list li{
    list-style:none;
    background-repeat: no-repeat;
}

.dropped {
    height: auto;
}

.droppedclimate{
    height: 104px;
    background-image: url('img/climate-sm.png') !important;
}

.droppednav{
    height: 81px;
    background-image: url('img/map-sm.png') !important;
}

.droppedweather{
    height: 143px;
    background-image: url('img/weather-sm.png') !important;
}

.droppedphone{
    height: 110px;
    background-image: url('img/phone-sm.png') !important;
}

.droppedmusic{
    height: 168px;
    background-image: url('img/no-clue-sm.png') !important;
}

.droppedlicalendar{
    height: 158px;
    background-image: url('img/calendar-sm.png') !important;
}

.droppedemail{
    height: 121px;
    background-image: url('img/email-sm.png') !important;
}

#all-colls-list li:hover, #coll-selected-list li:hover{
    cursor: move;
}

#hide-overflow {
    overflow: hidden;
    height: 455px;  
}

.sorted{
    background-color:#a74455;
}

.sortedli{
    background: none !important;
}   

.none {
    visibility: hidden !important;  
}
.droppedmusicbg{
    background-image: url('img/icon-music.png'); 
}
</style>

非常感谢任何指导。

jQuery拖放，删除，克隆和排序 - 元素工作separetly不在一起

0 个答案: