Use Vue.Draggable in Issue Boards instead of SortableJS
Summary
While implementing multi-select (#18954 (closed)) with SortableJS on Issue Boards we faced a few problems but the most notable was to keep Vue and DOM in sync with each other. Sortable mutates the DOM directly when moving an issue card from one list to another. It's not a problem when it's just a single card. Vue is able to accommodate the change. But whilst moving multiple cards, when we mutate the list of issues in state, Vue bails out of rendering due to duplicate key
across renders.
Improvements
With moving to Vue.Draggable
, a Vue
wrapper over SortableJS, inconsistencies between UI and Vue's internal state should be resolved since Vue.Draggable
does not mutate the DOM directly.
Involved components
./app/assets/javascripts/boards/
Blockers
Vue.Draggable
needs to support MultiDrag from SortableJS: https://github.com/SortableJS/Vue.Draggable/issues/649
cc: @donaldcook