1
我有2個列表，其中包含一些必須從左到右拖動的項目，並且可以在右側排序。我一直在努力將動畫添加到列表，我不知道它是如何工作的。但是如果您從右側拖動一個項目並拖入左側列表中，並慢慢地將其拖出而不拖放，它將不會從左側列表中排列（sortable2）。 另一個問題是，我不知道爲什麼佔位符比原來的項目大，爲什麼它有一個陰影？ 這裏是我的代碼： My fiddle (working) ****更新：剛纔發現從li刪除邊距可以修復該錯誤，但現在我需要修復中間的項目。有任何想法嗎？Jquery動畫排序問題
$(function() {
$("#sortable1 li").draggable({
\t \t \t cursor:"move", cursorAt:{top:50, left:40},
connectToSortable: ".connectedSortable",
helper:"clone",
\t \t \t revert:150,
remove: function(event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).draggable('cancel');
}
}).disableSelection();
\t
\t
\t
\t
\t
$("#sortable2").sortable({
\t \t axis:"y",
\t \t placeholder: "slide-placeholder",
\t \t start:function(e,ui){
placeholderHeight = ui.item.outerHeight();
ui.placeholder.height(placeholderHeight + 15);
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
},
change: function(event, ui) {
ui.placeholder.stop().height(0).animate({
height: ui.item.outerHeight() + 15
}, 300);
placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
$(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
height: 0
}, 300, function() {
$(this).remove();
placeholderHeight = ui.item.outerHeight();
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
});
},
stop: function(e, ui) {
$(".slide-placeholder-animator").remove();
},
}).disableSelection();
});#sortable1 { list-style-type: none; margin: auto; padding: 0; float: right; }
\t \t \t \t #sortable2 { list-style-type: none; margin: auto; padding: 0; float: left; min-height:130px; width:130px; border:1px solid black; }
\t \t \t \t #sortable1 li, #sortable2 li { padding: 5px; font-size: 1.2em; line-height:100px; width: 70px; height: 100px; border-radius:10%; color:#ffffff; box-shadow:3px 3px 1px #888888; }
\t \t \t \t .red{background-color:#ff3300;}
\t \t \t \t .blue{background-color:#1111ff;}
\t \t \t \t .black{background-color:#000000;}
\t \t \t \t .green{background-color:#00fd01;}
\t \t \t \t .yellow{background-color:#ffff66;}
\t \t \t \t .slide-placeholder{height:100px; background-color:#DADADA; border:1px dotted red; \t -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
\t \t \t <ul id="sortable1">
\t \t \t \t <li class="ui-state-default red">Item 1</li>
\t \t \t \t <li class="ui-state-default blue">Item 2</li>
\t \t \t \t <li class="ui-state-default black">Item 3</li>
\t \t \t \t <li class="ui-state-default green">Item 4</li>
\t \t \t \t <li class="ui-state-default yellow">Item 5</li>
\t \t \t </ul>
\t \t \t <ul id="sortable2" class="connectedSortable">
\t \t \t </ul>
\t </body>
我得到的錯誤：'對象不支持屬性或方法'draggable''。 –
@NinaScholz是的，我看到，太不能找出代碼在我的電腦上工作的原因，我會盡量修復它儘快 – Mamrez
@NinaScholz我已經添加我的小提琴鏈接不工作，因爲它應該但錯誤是 – Mamrez