Question

在与这个问题的战斗和战斗之后，我别无选择，只能寻求帮助！我的情况是这样的：我有许多绝对定位的元素。这些元素中的每一个都有自己的属性“顶部”和“左”。我遇到的巨大问题是当我尝试对物品进行分类时。

$(".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

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

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

Answer 1

重现所有元素是不切实际的，但我自己更新的基本思路（让它发挥作用）是这样的：

从容器和“portlet”中删除所有绝对定位
每个可分拣的容器左侧浮动，相对定位，并具有底部衬垫。这种填充意味着甚至可以将空容器作为目标
容器中的每个“portlet”的宽度设置为100％，并且左侧还有相对定位和底部边距（将它们分隔开）。
使用“start”参数动态设置占位符大小。我将占位符大小限制为350px高，但对于任何小于此的小部件，占位符将等于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。

Answer 2

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

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

检查here以获取有关如何使用这两种方法的更多详细信息：

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

2 个答案: