How to implement a JavaScript interface for moving “cards” between “trays”?

Question

PHP

You need to make such an interface in JavaScript:


the essence is simple: there are trays with cards with Surnames inside, the user grabs any card and drags it to any tray (for example, Ivanov grabs the card and drags it to tray 2), then clicks on the Save button and I in PHP I get an array of trays with nested arrays of cards inside.

Can anyone suggest a ready-made JavaScript library, or even better a jQuery plugin?

The standard Jquery UI has Droppable ( jqueryui.com/droppable ), but you will have to finish a lot, but I would like something closer to the task and semi-finished.

Thank you!

Answer 1

jquery sortable

$( ".block-card" ).sortable({
      items: ".item"   // див который перетаскиваем item
      connectWith: ".connectedSortable"  // класс контейнер лоток
    }).disableSelection();

jsfiddle.net/2rYqu

Answer 2

Use this lib: rubaxa.github.io/Sortable