Question

I created BIN "http://jsbin.com/cekarimaxu/1/edit?html,css,js,output" of my issue.

在这里，我有一个类似STAGE的结构 - ＆gt;在舞台上有一张卡片。

现在卡片和舞台都应该是可排序的，并且我可以使用RubaXa sortable进行分类。请注意，在这里我设置“forcefallback：true”，因为我想设置拖动的元素（两个阶段以及卡片）。

现在我面临的问题是我可以拖放卡片，但我无法拖放各个阶段参见： - VIDEO

所需的行为应该是这样的： - VIDEO

但是，如果我设置“forcefallback：false”，这个想要的行为就出现了，在我的情况下，我想在拖动的元素上应用一些自定义CSS，所以我不能设置“forcefallback：false”

Answer 1

我认为问题在于您如何构建嵌套列表。

您当前的实施：

<div class="parent">
    <div class="list-group">Stage -1
        <div class="card">A</div>
        <div class="card">B</div>
        <div class="card">C</div>
    </div>
    <div class="list-group">Stage-2
        <div class="card">D</div>
        <div class="card">E</div>
        <div class="card">F</div>
    </div>
    <div class="list-group">Stage-3
        <div class="card">G</div>
        <div class="card">H</div>
        <div class="card">I</div>
    </div>    
</div>

您需要做的是嵌套子组，类似于嵌套父组的方式。也就是说，每个div中只应该有可拖动的项目。对不起，如果这是一个不好的解释，但也许一个例子会更有意义。以下是我重新组织您的列表以便它可以工作的方式：

<div class="parent">
  <div class="list-group">
    <div>Stage - 1</div>
    <div class="child">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
  </div>
  <div class="list-group">
    <div>Stage - 2</div>
    <div class="child">
      <div class="card">D</div>
      <div class="card">E</div>
      <div class="card">F</div>
    </div>
  </div>
  <div class="list-group">
    <div>Stage - 3</div>
    <div class="child">
      <div class="card">G</div>
      <div class="card">H</div>
      <div class="card">I</div>
    </div>
  </div>    
</div>

请注意添加div.child元素。

然后你应该更新你的javascript以匹配这个新结构，如下所示：

// Select parent group and make sortable
var parent = document.getElementsByClassName('parent');
new Sortable(parent[0], {
    group: {
        name: 'parent-group'
    },
    forceFallback: true,
    fallbackClass: 'clone',  
});

// Select our child group and make sortable
var child = document.getElementsByClassName('child')
for(var i = 0;i < child.length;i++) {
    new Sortable(child[i], {
        group: {
            name: 'child-group',
            pull: true,
        },
        forceFallback: true,
        fallbackClass: 'clone_card',  
    });
}

这将选择您最初拥有它的父组，但现在我们选择包含我们想要拖动的对象的.list-group元素，而不是选择.child元素。

这是关于jsbin的实际示例，您可以参考：
http://jsbin.com/ronikomabi/edit?html,css,js,output

要解决您的评论，您需要为.child容器添加最小宽度，这样您仍然可以使用放置区，即使在删除所有项目后也可以将项目放入其中。我使用修复该问题的新版本更新了JSbin链接。

如果在RubaXa Sortable中对父级和子级应用sortable，则无法拖放元素

1 个答案: