sortablejs es un enlace de complemento de arrastrar y soltar
Cómo funciona el complemento
<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 });Verifique el código a continuación: pero tengo varios contenedores "example3Left", entonces, ¿cómo puedo usarlo con el nombre de la clase en lugar del código de ejemplo de ID pero no funciona ?
<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 });tienes que hacer un bucle
$('.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>