Drag-and-drop improvements for projects and issue pins (#29875)

1. Add "grabbing" cursor while dragging items:


![](c60845ff-7544-4215-aeaa-408e8c4ef03a)

2. Make project board only drag via their header, not via their whole
body.


![](62c27f3d-993a-481d-9cc3-b6226b4c5d61)

3. Fix some cursor problems in projects
4. Move shared options into `createSortable`.
This commit is contained in:
silverwind 2024-03-28 00:20:38 +01:00 committed by GitHub
parent b08c7afe5f
commit 7fda109aba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 27 additions and 10 deletions

View file

@ -1,4 +1,19 @@
export async function createSortable(...args) {
export async function createSortable(el, opts = {}) {
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
return new Sortable(...args);
return new Sortable(el, {
animation: 150,
ghostClass: 'card-ghost',
onChoose: (e) => {
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
handle.classList.add('tw-cursor-grabbing');
opts.onChoose?.(e);
},
onUnchoose: (e) => {
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
handle.classList.remove('tw-cursor-grabbing');
opts.onUnchoose?.(e);
},
...opts,
});
}