[英]Sortablejs drag and drop with multiple container
sortablejs is a drag and drop plugin link sortablejs 是一个拖放插件链接
How the plugin working插件如何工作
<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
});
Check below code - But I have multiple "example3Left" container so how can I use with class name instead of ID example code but not working检查下面的代码 - 但我有多个“example3Left”容器,所以我如何使用 class 名称而不是 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
});
you have to loop你必须循环
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.