JQuery Sortable - 对绝对定位元素和占位符进行排序答案

【问题标题】：JQuery Sortable - Sorting absolute positioned elements and placeholderJQuery Sortable - 对绝对定位元素和占位符进行排序
【发布时间】：2014-01-10 22:51:53
【问题描述】：

在与这个问题斗争和斗争之后，我别无选择，只能寻求帮助！我的情况是这样的：我有许多绝对定位元素。每个元素都有自己的属性“top”和“left”。我遇到的最大问题是当我尝试对项目进行排序时。

$(".container").sortable({
    containment: ".container",
    cursor: 'move',
    items: '.element',
    helper: 'clone',
    placeholder: 'new-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    revert: true,
    scroll: false,
    start: function(event, ui) {
        event.stopPropagation();
        $(".new-placeholder").css("left", ui.helper.position().left);
        $(".new-placeholder").css("top", ui.helper.position().top);
        $(".new-placeholder").css("height", ui.helper.height());
        $(".new-placeholder").css("width", ui.helper.width());
    },
    change: function(event, ui) {
        console.log("Placeholder index: " + ui.placeholder.index());
    }
}).disableSelection();

这是Current Behavior，这是Expected behavior

如您所见，当拖动元素结束时，元素应该改变它们的位置。有没有更好的方法来做到这一点？我无法摆脱绝对位置，这是主要问题。我知道解决方案必须是更改、更新和停止方法，但我自己无法解决。

到目前为止，我得到的只是当项目被拖动到另一个元素上时获取占位符的新索引，但是 ¿我如何更改占位符的位置并根据该索引对其余元素进行排序？

【问题讨论】：

我也使用了绝对定位的元素。我永远无法让它与 sortable 一起工作。我必须为我的 sortables 创建一个新的布局管理器，以便它可以像（实际上，比）原始的绝对定位布局一样工作。
@greg-pettit 感谢您的回答！我仍在努力让它发挥作用。你能给我一些方法想法来实施你所说的解决方案吗？我应该摆脱可排序的吗？据我所见，可排序根本不适用于绝对位置。即使我使用相对位置，如果我使用 JQuery 设置顶部和左侧属性，排序后的结果是一团糟。非常感谢提前！！！

标签： jquery jquery-ui jquery-ui-sortable absolute

【解决方案1】：

重现所有元素是不切实际的，但我自己的更新（让它工作）的基本想法是这样的：

从容器和“portlets”中移除所有绝对定位
每个可排序容器都向左浮动，相对定位，并具有底部填充。这种填充意味着即使是空容器也可以成为目标
容器中的每个“portlet”都将宽度设置为 100%，并且还通过相对定位和底部边距向左浮动（以将它们隔开）。
使用“start”参数动态设置占位符大小。我将占位符的大小限制为 350 像素高，但对于任何小于该值的小部件，占位符将等于 portlet 的大小。
使用“connectWith”参数链接容器。

基本 HTML：

<div class="portletContainer"> <!-- floated left, has padding -->

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some stuff </div>
  </div>

  <div class="portlet"> <!-- floated left, margin-bottom, 100% width -->
    <div> some more stuff </div>
  </div>

</div>

<div class="portletContainer">
  <!-- repeat the above pattern; the two containers are then linked -->
</div>

基本的可排序 JavaScript：

$('.portletContainer').sortable({
  connectWith: ".portletContainer",
  start: function(e, ui) {
    var elementHeight = ui.item.height();
    if(elementHeight < 350) {
      ui.placeholder.height(elementHeight);
    }
  }
});

如果这仍然不适合您，则可能是您忽略了某些事情。要么是继承了绝对定位，要么是 JavaScript 正在添加它。

我认为这涵盖了所有基础，但更短的版本是：我将其剥离，直到我的标记和 CSS 类似于 jQuery UI 可排序演示页面中的“portlet”示例中的标记和 CSS。

【讨论】：

这正是我需要的方法。我肯定需要更改我的 HTML 结构以允许这样做。

【解决方案2】：

有两种方法可以实现这一目标。您可以使用 nth-child 或 nth-type-of 选择器的一些 CSS 技巧来将绝对定位应用于索引而不是直接应用于元素。因此，当项在 DOM 树中由于可排序插件的工作方式而移动时，它们将捕获正确的位置属性，因为索引将保持不变。

另一种方法是使用插件的sortchange 事件，只要列表中项目的顺序发生更改，就会触发该事件。因此，在事件函数中，您需要遍历您的项目并重新应用正确的定位。

查看here 了解有关如何使用这两种方法的更多详细信息：

【讨论】：