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

1. Add "grabbing" cursor while dragging items:


![](https://github.com/go-gitea/gitea/assets/115237/c60845ff-7544-4215-aeaa-408e8c4ef03a)

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


![](https://github.com/go-gitea/gitea/assets/115237/62c27f3d-993a-481d-9cc3-b6226b4c5d61)

3. Fix some cursor problems in projects
4. Move shared options into `createSortable`.

web_src/js/features/repo-issue-list.js

@@ -188,8 +188,6 @@ async function initIssuePinSort() {
 
   createSortable(pinDiv, {
     group: 'shared',
-    animation: 150,
-    ghostClass: 'card-ghost',
     onEnd: pinMoveEnd,
   });
 }

web_src/js/features/repo-projects.js

@@ -58,8 +58,7 @@ async function initRepoProjectSortable() {
   createSortable(mainBoard, {
     group: 'project-column',
     draggable: '.project-column',
-    animation: 150,
-    ghostClass: 'card-ghost',
+    handle: '.project-column-header',
     delayOnTouchOnly: true,
     delay: 500,
     onSort: async () => {
@@ -86,8 +85,6 @@ async function initRepoProjectSortable() {
     const boardCardList = boardColumn.getElementsByClassName('cards')[0];
     createSortable(boardCardList, {
       group: 'shared',
-      animation: 150,
-      ghostClass: 'card-ghost',
       onAdd: moveIssue,
       onUpdate: moveIssue,
       delayOnTouchOnly: true,

web_src/js/modules/sortable.js

@@ -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,
+  });
 }