当元素向右浮动时,jQuery Sortable 拖动工作不流畅。我尝试修复它但没有成功,我不明白为什么这是一个问题。
要重现和理解该问题,您需要尝试拖动元素,您会发现有时您喜欢将元素放在一个地方,而占位符却留在另一个地方。请参阅附图以更好地理解。
当删除 float:right
属性时,它将正常工作。
注意:这个问题有点难以理解,我在 jsfiddle 上重现了它,但你需要自己动手才能理解它
https://jsfiddle.net/royshoa/4Lprn9bs/72
我很乐意为此得到一些答案。
最佳答案
看起来 #sortable
中右侧的 float 打乱了 jquery-ui-sortable
的行为。
保持您的反向顺序 (3,2,1) 并将其向右对齐并保持所需功能按照您描述的方式工作:
从
#sortable
中取出float:right
并将其放在 parent.example-box
:现在父容器 float 到 对,但不影响#sortable
要获得相反的 3、2、1 顺序,您只需将
使用 get().reverse() 在您的 jQuery 代码中对元素进行排序.这样做的命令现在不是 不再影响jquery-ui-sortable
,因为不再使用float:right
html:
<div class="example-box">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
</div>
CSS:
.example-box {
margin: 50px;
border: 1px solid navy;
float: right;
}
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
width: 120px;
height: 120px;
font-size: 4em;
text-align: center;
float: left;
}
#sortable li {}
.draggable-placeholder {
border: 2px dashed #D9D9D9 !important;
background-color: #F7F7F7 !important;
}
jQuery:
jQuery(function($) {
$('#sortable').sortable({
opacity: 0.8,
revert: true,
forceHelperSize: true,
forcePlaceholderSize: true,
placeholder: 'draggable-placeholder',
tolerance: 'pointer',
axis: 'x'
});
var list = $('ul#sortable');
var listItems = list.children('#sortable>li');
list.append(listItems.get().reverse());
});
这是一个有效的 jsfiddle:https://jsfiddle.net/n7b9wezj/3/
注意:我已经设置了axis:x
,因为它显示的功能更好,但你不需要设置它。蓝色边框只是为了说明div的位置...
编辑以反射(reflect)评论 这是另一个使用 flexbox 的例子:https://jsfiddle.net/y9qd08bn/1/ 我已将宽度设置为 90%,因此它在 fiddle 中看起来更好,但您可以将其设置为 100%。
关于css - jQuery Sortable Items Float Right 排序不流畅问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54616476/