我有 2 个列表，其中包含一些元素，这些元素必须可以从左侧拖动到右侧，并且可以在右侧进行排序。我一直在努力将动画添加到我不知道它是如何工作的列表中。但是如果你把一个元素从右边拖到左边的列表里，然后慢慢地把它拖出来而不掉落，它就不会从左边列表中出来(sortable2)。 另一个问题是我不知道为什么占位符比原始元素大，为什么它有阴影？ 这是我的代码: My fiddle (working) ****更新:刚刚发现从 li 中移除边距可以修复错误，但现在我需要修复中间的元素。有什么想法吗？
$(function() {
$( "#sortable1 li" ).draggable({
cursor:"move", cursorAt:{top:50, left:40},
connectToSortable: ".connectedSortable",
helper:"clone",
revert:150,
remove: function(event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).draggable('cancel');
}
}).disableSelection();
$( "#sortable2" ).sortable({
axis:"y",
placeholder: "slide-placeholder",
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; }
#sortable2 { list-style-type: none; margin: auto; padding: 0; float: left; min-height:130px; width:130px; border:1px solid black; }
#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; }
.red{background-color:#ff3300;}
.blue{background-color:#1111ff;}
.black{background-color:#000000;}
.green{background-color:#00fd01;}
.yellow{background-color:#ffff66;}
.slide-placeholder{height:100px; background-color:#DADADA; border:1px dotted red; -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>
<ul id="sortable1">
<li class="ui-state-default red">Item 1</li>
<li class="ui-state-default blue">Item 2</li>
<li class="ui-state-default black">Item 3</li>
<li class="ui-state-default green">Item 4</li>
<li class="ui-state-default yellow">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>
</body>最佳答案
这是问题 https://jsfiddle.net/3tdtkcu4/ 后半部分的解决方案
$(function() {
$( "#sortable1 li" ).draggable({
cursor:"move",
cursorAt:{top:50, left:40},
connectToSortable: ".connectedSortable",
helper:"clone",
revert:150,
remove: function(event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).draggable('cancel');
}
}).disableSelection();
$( "#sortable2" ).sortable({
axis:"y",
placeholder: "slide-placeholder",
start:function(e,ui){
placeholderHeight = ui.item.outerHeight();
ui.placeholder.height(placeholderHeight - 10);
$('<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() - 10
}, 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;
}
#sortable2 {
list-style-type: none;
margin: auto;
padding: 0;
float: left;
min-height:130px;
width:130px;
border:1px solid black;
}
.ui-state-default {
margin: 10px 29px;
padding: 5px;
font-size: 1.2em;
line-height:100px;
width: 70px;
height: 100px;
border-radius:10%;
color:#ffffff;
box-shadow:3px 3px 1px #888888;
}
.red {
background-color:#ff3300;
}
.blue {
background-color:#1111ff;
}
.black {
background-color:#000000;
}
.green {
background-color:#00fd01;
}
.yellow {
background-color:#ffff66;
}
.slide-placeholder {
margin: 10px 29px;
padding: 5px;
font-size: 1.2em;
line-height:100px;
width: 70px;
height:100px;
border-radius:10%;
background-color:#DADADA;
border:1px dotted red;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable1">
<li class="ui-state-default red">Item 1</li>
<li class="ui-state-default blue">Item 2</li>
<li class="ui-state-default black">Item 3</li>
<li class="ui-state-default green">Item 4</li>
<li class="ui-state-default yellow">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>希望对您有所帮助。 你能解释一下问题的前半部分吗？
关于javascript - Jquery 动画可排序问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45649736/