时间戳

首页 > 解决方案 > jQuery 可排序项目浮动右排序不平滑问题

css - jQuery 可排序项目浮动右排序不平滑问题

问题描述

当项目向右浮动时，jQuery 可排序拖动无法顺利进行。我尝试修复它但没有成功，我不明白为什么它是一个问题。

要重现和理解该问题，您需要尝试拖动项目，您会发现有时您喜欢将项目放置在一个地方，而占位符则留在另一个地方。请参阅附图以更好地理解。

在此处输入图像描述

删除该float:right属性时，它会很好地工作。

注意：它有点难以理解这个问题，我在 jsfiddle 上重现了它，但你需要使用它来理解它

https://jsfiddle.net/royshoa/4Lprn9bs/72

我很乐意为此得到一些答案。

标签： cssjquery-uijquery-ui-sortable

解决方案

看起来右边的浮动#sortable正在搞乱jquery-ui-sortable.

保持相反的顺序 (3,2,1) 并将其向右对齐并保持所需的功能按照您的描述工作：

  • 取出float:rightfrom#sortable并将其放在 parent .example-box：现在 parent 的容器向右浮动，但不影响#sortable

  • 要获得相反的 3、2、1 顺序，您只需使用get().reverse() 反转
    jQuery 代码中的元素顺序。这样做现在不再影响订单，因为不再使用jquery-ui-sortablefloat: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的位置...

编辑以反映 此处的评论是使用 flexbox 的另一个示例：https ://jsfiddle.net/y9qd08bn/1/ 我已将宽度设置为 90%，因此在小提琴中看起来更好，但您可以使用 100% .

推荐阅读