0

在与这个问题斗争和斗争之后，我别无选择，只能寻求帮助！我的情况是这样的：我有一些绝对定位的元素。这些元素中的每一个都有自己的属性“ 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();

这是当前行为，这是预期行为

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

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

4

2 回答 2

1

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

  1. 从容器和“portlet”中删除所有绝对定位

  2. 每个可排序容器都向左浮动，相对定位，并具有底部填充。这种填充意味着即使是空容器也可以成为目标

  3. 容器中的每个“portlet”都将宽度设置为 100%，并且还通过相对定位和底部边距向左浮动（以将它们隔开）。

  4. 使用“开始”参数动态设置占位符大小。我将占位符的大小限制为 350 像素高，但对于任何小于该值的小部件，占位符将等于 portlet 的大小。

  5. 使用“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。

于 2013-01-17T17:32:16.880 回答
0

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

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

在此处查看有关如何使用这两种方法的更多详细信息：

于 2014-01-10T14:30:50.733 回答