带有多个容器的Sortablejs拖放

Question

sortablejs是一个拖放插件链接。

插件是如何工作的

<div id="example3Left"> 
<div class="list-group-item"> Item 1</div>
<div class="list-group-item"> Item 2</div>
<div class="list-group-item"> Item 2</div>
</div>
<div id="example3Right">
// Element dropping block
</div>
 

    new Sortable(example3Left, {
        group: {
            name: 'shared',
            pull: 'clone' // To clone: set pull to 'clone'
        },
        animation: 150
    });
    
    new Sortable(example3Right, {
        group: {
            name: 'shared',
            pull: 'clone'
        },
        animation: 150
    });

检查下面的代码-但是我有多个"example3Left“容器，所以我如何使用类名而不是ID示例代码，但不能工作

<div class="group group-1"> 
<div class="list-group-item"> Item 1</div>
<div class="list-group-item"> Item 2</div>
<div class="list-group-item"> Item 2</div>
</div>
<div class="group group-2"> 
<div class="list-group-item"> Item 1</div>
<div class="list-group-item"> Item 2</div>
<div class="list-group-item"> Item 2</div>
</div>
<div id="example3Right">
// Element dropping block
</div>
new Sortable($('.group).get( 0 ), {
        group: {
            name: 'shared',
            pull: 'clone' // To clone: set pull to 'clone'
        },
        animation: 150
    });

    new Sortable(example3Right, {
        group: {
            name: 'shared',
            pull: 'clone'
        },
        animation: 150
    });

Answer 1

你必须循环

​

$('.group, #example3Right').each((i, el) => {
  new Sortable(el, {
    group: {
      name: 'shared',
      pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
  });
})

.list-group-item{border: 1px solid #bbb;width:100px;margin:5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<div class="group group-1"> 
<div class="list-group-item"> Item 1</div>
<div class="list-group-item"> Item 2</div>
<div class="list-group-item"> Item 3</div>
</div>
<div class="group group-2"> 
<div class="list-group-item"> Item 1</div>
<div class="list-group-item"> Item 2</div>
<div class="list-group-item"> Item 3</div>
</div>
<div id="example3Right">
// Element dropping block
</div>

​