sortablejs is a drag and drop plugin link
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
<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