diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index ac6212719..0e416498a 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -17,7 +17,7 @@ import SortUpIcon from '../widgets/icons/sortUp'
 import GripIcon from '../widgets/icons/grip'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
-import useSortable from '../hooks/sortable'
+import {useSortableWithGrip} from '../hooks/sortable'
 
 import ContentElement from './content/contentElement'
 import AddContentMenuItem from './addContentMenuItem'
@@ -35,7 +35,7 @@ type Props = {
 
 const ContentBlock = React.memo((props: Props): JSX.Element => {
     const {intl, card, contents, block, readonly} = props
-    const [isDragging, isOver, dragRef, previewRef] = useSortable('content', block, true, props.onDrop)
+    const [isDragging, isOver, gripRef, itemRef] = useSortableWithGrip('content', block, true, props.onDrop)
 
     const index = contents.indexOf(block)
     let className = 'ContentBlock octo-block'
@@ -46,7 +46,7 @@ const ContentBlock = React.memo((props: Props): JSX.Element => {
         <div
             className={className}
             style={{opacity: isDragging ? 0.5 : 1}}
-            ref={previewRef}
+            ref={itemRef}
         >
             <div className='octo-block-margin'>
                 {!props.readonly &&
@@ -107,7 +107,7 @@ const ContentBlock = React.memo((props: Props): JSX.Element => {
                     </MenuWrapper>
                 }
                 <div
-                    ref={dragRef}
+                    ref={gripRef}
                     className='dnd-handle'
                 >
                     <GripIcon/>
diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx
index 51bc1186f..7cb843133 100644
--- a/webapp/src/components/gallery/galleryCard.tsx
+++ b/webapp/src/components/gallery/galleryCard.tsx
@@ -15,7 +15,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
 import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
-import useSortable from '../../hooks/sortable'
+import {useSortable} from '../../hooks/sortable'
 
 import ImageElement from '../content/imageElement'
 import ContentElement from '../content/contentElement'
diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx
index bc8f02df4..a7542e5bc 100644
--- a/webapp/src/components/kanban/kanbanCard.tsx
+++ b/webapp/src/components/kanban/kanbanCard.tsx
@@ -12,7 +12,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
 import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
-import useSortable from '../../hooks/sortable'
+import {useSortable} from '../../hooks/sortable'
 
 import './kanbanCard.scss'
 import PropertyValueElement from '../propertyValueElement'
diff --git a/webapp/src/components/table/tableHeader.tsx b/webapp/src/components/table/tableHeader.tsx
index a7ddc3d87..284a7545f 100644
--- a/webapp/src/components/table/tableHeader.tsx
+++ b/webapp/src/components/table/tableHeader.tsx
@@ -9,7 +9,7 @@ import SortDownIcon from '../../widgets/icons/sortDown'
 import SortUpIcon from '../../widgets/icons/sortUp'
 import MenuWrapper from '../../widgets/menuWrapper'
 import Label from '../../widgets/label'
-import useSortable from '../../hooks/sortable'
+import {useSortable} from '../../hooks/sortable'
 
 import HorizontalGrip from './horizontalGrip'
 
diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx
index 22f4e3272..86dc1833e 100644
--- a/webapp/src/components/table/tableRow.tsx
+++ b/webapp/src/components/table/tableRow.tsx
@@ -9,7 +9,7 @@ import mutator from '../../mutator'
 import {BoardTree} from '../../viewModel/boardTree'
 import Button from '../../widgets/buttons/button'
 import Editable from '../../widgets/editable'
-import useSortable from '../../hooks/sortable'
+import {useSortable} from '../../hooks/sortable'
 
 import PropertyValueElement from '../propertyValueElement'
 import './tableRow.scss'
diff --git a/webapp/src/hooks/sortable.tsx b/webapp/src/hooks/sortable.tsx
index 37d8937c6..582bd912f 100644
--- a/webapp/src/hooks/sortable.tsx
+++ b/webapp/src/hooks/sortable.tsx
@@ -1,11 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {useRef} from 'react'
-import {useDrag, useDrop} from 'react-dnd'
+import {useDrag, useDrop, DragElementWrapper, DragSourceOptions, DragPreviewOptions} from 'react-dnd'
 
-export default function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>, React.RefObject<HTMLDivElement>] {
-    const ref = useRef<HTMLDivElement>(null)
-    const previewRef = useRef<HTMLDivElement>(null)
+function useSortableBase(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, DragElementWrapper<DragSourceOptions>, DragElementWrapper<any>, DragElementWrapper<DragPreviewOptions>] {
     const [{isDragging}, drag, preview] = useDrag(() => ({
         type: itemType,
         item,
@@ -25,7 +23,21 @@ export default function useSortable(itemType: string, item: any, enabled: boolea
         canDrop: () => enabled,
     }), [item, handler, enabled])
 
+    return [isDragging, isOver, drag, drop, preview]
+}
+
+export function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>] {
+    const ref = useRef<HTMLDivElement>(null)
+    const [isDragging, isOver, drag, drop] = useSortableBase(itemType, item, enabled, handler)
     drop(drag(ref))
+    return [isDragging, isOver, ref]
+}
+
+export function useSortableWithGrip(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>, React.RefObject<HTMLDivElement>] {
+    const ref = useRef<HTMLDivElement>(null)
+    const previewRef = useRef<HTMLDivElement>(null)
+    const [isDragging, isOver, drag, drop, preview] = useSortableBase(itemType, item, enabled, handler)
+    drag(ref)
     drop(preview(previewRef))
     return [isDragging, isOver, ref, previewRef]
 }