问题描述
我在display:flex
父div内有一堆div。父div可通过jquery-ui的sortable
函数进行排序。
除了允许用户进行排序外,我还要添加一些进行动画排序的按钮。
例如,使用以下HTML:
<div class="sortable">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
我想要一个按钮,当按下该按钮时,会将div1移动到div4和div5之间,使其平滑移动(实际上,稍微动一下就好像是用手移动会更好),并移动所有div通过,因此看起来好像是在用手移动。
使用jquery-ui的sortable()是否可能,还是最好自定义解决方案?
解决方法
请考虑以下示例。
$(function() {
function arrange(obj,pre) {
obj = $(obj);
var t = $("[id^='div']:eq(" + pre + ")");
obj.animate({
top: t.position().top + "px"
},{
duration: 1000,step: function(i) {
$(this).position({
my: "left top",at: "left bottom",of: t,});
},complete: function() {
obj.detach().css("top","").insertAfter(t);
}
});
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrange($("#div1"),3);
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button>
内置于https://css-tricks.com/jquery-ui-position-function/
更新
$(function() {
function swap(a,b,ms) {
console.log("Swap:",a.attr("id"),"with",b.attr("id"));
a.animate({
top: b.position().top + "px"
},{
duration: ms,of: b,complete: function() {
a.detach().css("top","").insertAfter(b);
}
});
}
function arrangeAfter(a,b) {
var n = a.next();
for (var c = parseInt(n.attr("id").slice(-1)); n.index() <= b.index(); c++) {
swap(a,n,400);
n = $("#div" + (c + 1));
}
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrangeAfter($("#div1"),$("#div4"));
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button> <button class="btn" id="reset">Reset</button>