:art: https://github.com/siyuan-note/siyuan/issues/10142

app/src/assets/scss/business/_custom.scss

@@ -50,6 +50,14 @@
     padding: 4px 8px;
     font-size: 100%;
     border-bottom: 0;
+
+    & > .block__icon {
+      cursor: grab;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
   }
 
   .b3-text-field--text {

app/src/assets/scss/util/_function.scss

@@ -70,6 +70,10 @@
     cursor: pointer;
   }
 
+  &__grab {
+    cursor: grab;
+  }
+
   &__none {
     display: none !important;
   }

app/src/protyle/gutter/index.ts

@@ -1936,7 +1936,7 @@ export class Gutter {
                     const rowElement = hasClosestByClassName(target, "av__row");
                     if (rowElement && !rowElement.classList.contains("av__row--header")) {
                         element = rowElement;
-                        html = `<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true"'}></span></button>`;
+                        html = `<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true" class="fn__grab"'}></span></button>`;
                         if (!protyle.disabled) {
                             html = `<button data-type="NodeAttributeViewRow" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>${html}`;
                         }

app/src/protyle/render/av/asset.ts

@@ -67,7 +67,7 @@ export const getAssetHTML = (cellElements: HTMLElement[]) => {
         }
 
         html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
-<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
 ${contentHTML}
 <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
 </button>`;

app/src/protyle/render/av/blockAttr.ts

@@ -161,7 +161,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
 </div>`;
             table.keyValues?.forEach(item => {
                 html += `<div class="block__icons av__row" data-id="${id}">
-    <div class="block__icon"><svg><use xlink:href="#iconDrag"></use></svg></div>
+    <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
     <div class="block__logo ariaLabel" aria-label="${escapeAttr(item.key.name)}"">
         ${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
         <span>${item.key.name}</span>

app/src/protyle/render/av/col.ts

@@ -119,7 +119,7 @@ export const getEditHTML = (options: {
 </button>`;
         colData.options.forEach(item => {
             html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${item.name}</span>

app/src/protyle/render/av/filter.ts

@@ -508,7 +508,7 @@ export const getFiltersHTML = (data: IAVTable) => {
 
     data.filters.forEach((item: IAVFilter) => {
         html += `<button class="b3-menu__item" draggable="true" data-id="${item.column}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">${genFilterItem(item)}</div>
     <svg class="b3-menu__action" data-type="removeFilter"><use xlink:href="#iconTrashcan"></use></svg>
 </button>`;

app/src/protyle/render/av/openMenuPanel.ts

@@ -1080,7 +1080,7 @@ const getPropertiesHTML = (data: IAVTable) => {
     data.columns.forEach((item: IAVColumn) => {
         if (item.hidden) {
             hideHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip">
             ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
@@ -1092,7 +1092,7 @@ const getPropertiesHTML = (data: IAVTable) => {
 </button>`;
         } else {
             showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip">
             ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}

app/src/protyle/render/av/relation.ts

@@ -195,7 +195,7 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
 const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, isDetached?: boolean, text?: string) => {
     if (type === "selected") {
         return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <span class="b3-menu__label${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
     <svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
 </button>`;

app/src/protyle/render/av/select.ts

@@ -18,7 +18,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
                 html += `<button data-type="addColOptionOrCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${item.name}</span>

app/src/protyle/render/av/sort.ts

@@ -94,7 +94,7 @@ export const getSortsHTML = (columns: IAVColumn[], sorts: IAVSort[]) => {
     };
     sorts.forEach((item: IAVSort) => {
         html += `<button draggable="true" class="b3-menu__item" data-id="${item.column}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <select class="b3-select" style="margin: 4px 0">
         ${genSortItem(item.column)}
     </select>

app/src/protyle/render/av/view.ts

@@ -157,8 +157,8 @@ export const getSwitcherHTML = (views: IAVView[], viewId: string) => {
     let html = "";
     views.forEach((item) => {
         html += `<button draggable="true" class="b3-menu__item" data-id="${item.id}">
-    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
-     <div class="fn__flex-1">
+    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
+    <div class="fn__flex-1">
         <span class="b3-chip${item.id === viewId ? " b3-chip--primary" : ""}">
             ${item.icon ? unicode2Emoji(item.icon, "icon", true) : '<svg class="icon"><use xlink:href="#iconTable"></use></svg>'}
             <span class="fn__ellipsis">${item.name}</span>