[WEB-1138] feat: List lssue Layout Drag and Drop (#4536)

* List Dnd Complete feature

* fix minor bugs in list dnd

* remove double overlay in kanban post refactor

* add missing dependencies to useEffects

* make provision to add to the last issue of the group

* show current child issues to also be disabled if the parent issue is being dragged

* fix last issue border

* fix code static analysis suggestions

* prevent context menu on drag handle

packages/ui/src/drag-handle.tsx

@@ -1,19 +1,29 @@
+import React from "react";
 import { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
 
 interface IDragHandle {
   isDragging: boolean;
+  disabled?: boolean;
 }
 
 export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
-  const { isDragging } = props;
+  const { isDragging, disabled = false } = props;
+
+  if (disabled) {
+    return <div className="w-[14px] h-[18px]" />;
+  }
 
   return (
     <button
       type="button"
-      className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
+      className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
         isDragging ? "opacity-100" : "opacity-0"
       }`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       ref={ref}
     >
       <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />

packages/ui/src/index.ts

@@ -12,4 +12,5 @@ export * from "./tooltip";
 export * from "./loader";
 export * from "./control-link";
 export * from "./toast";
+export * from "./drag-handle";
 export * from "./drop-indicator";

web/components/issues/issue-layouts/group-drag-overlay.tsx

@@ -0,0 +1,61 @@
+import { AlertCircle } from "lucide-react";
+import { TIssueOrderByOptions } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
+  canDropOverIssue: boolean;
+  isDropDisabled: boolean;
+  dropErrorMessage?: string;
+  orderBy: TIssueOrderByOptions | undefined;
+  isDraggingOverColumn: boolean;
+};
+
+export const GroupDragOverlay = (props: Props) => {
+  const { dragColumnOrientation, canDropOverIssue, isDropDisabled, dropErrorMessage, orderBy, isDraggingOverColumn } =
+    props;
+
+  const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
+  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+
+  return (
+    <div
+      className={cn(
+        `absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay ${dragColumnOrientation}`,
+        {
+          "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
+        },
+        { hidden: !shouldOverlay }
+      )}
+    >
+      <div
+        className={cn(
+          "p-3 mt-8 flex flex-col rounded items-center",
+          {
+            "text-custom-text-200": shouldOverlay,
+          },
+          {
+            "text-custom-text-error": isDropDisabled,
+          }
+        )}
+      >
+        {dropErrorMessage ? (
+          <div className="flex items-center">
+            <AlertCircle width={13} height={13} /> &nbsp;
+            <span>{dropErrorMessage}</span>
+          </div>
+        ) : (
+          <>
+            {readableOrderBy && (
+              <span>
+                The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
+              </span>
+            )}
+            <span>Drop here to move the issue.</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -4,26 +4,24 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 import { DeleteIssueModal } from "@/components/issues";
 import { ISSUE_DELETED } from "@/constants/event-tracker";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUser } from "@/hooks/store";
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // store
-import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
 // ui
 // types
 import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
 //components
-import { GroupDropLocation, handleGroupDragDrop, getSourceFromDropPayload } from "../utils";
+import { getSourceFromDropPayload } from "../utils";
 import { KanBan } from "./default";
 import { KanBanSwimLanes } from "./swimlanes";
 
-
 export type KanbanStoreType =
   | EIssuesStoreType.PROJECT
   | EIssuesStoreType.MODULE
@@ -65,12 +63,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   } = useIssueDetail();
   const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
     useIssuesActions(storeType);
-  const {
-    issues: { addCycleToIssue, removeCycleFromIssue },
-  } = useIssues(EIssuesStoreType.CYCLE);
-  const {
-    issues: { changeModulesInIssue },
-  } = useIssues(EIssuesStoreType.MODULE);
 
   const deleteAreaRef = useRef<HTMLDivElement | null>(null);
   const [isDragOverDelete, setIsDragOverDelete] = useState(false);
@@ -101,6 +93,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
+
   const canEditProperties = useCallback(
     (projectId: string | undefined) => {
       const isEditingAllowedBasedOnProject =
@@ -153,86 +147,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     );
   }, [deleteAreaRef?.current, setIsDragOverDelete, setDraggedIssueId, setDeleteIssueModal]);
 
-  /**
-   * update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
-   * @param projectId
-   * @param issueId
-   * @param data
-   * @param issueUpdates
-   */
-  const updateIssueOnDrop = async (
-    projectId: string,
-    issueId: string,
-    data: Partial<TIssue>,
-    issueUpdates: {
-      [groupKey: string]: {
-        ADD: string[];
-        REMOVE: string[];
-      };
-    }
-  ) => {
-
-    const errorToastProps = {
-      type: TOAST_TYPE.ERROR,
-      title: "Error!",
-      message: "Error while updating issue"
-    }
-    const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
-    const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
-
-    const isModuleChanged = Object.keys(data).includes(moduleKey);
-    const isCycleChanged = Object.keys(data).includes(cycleKey);
-
-    if (isCycleChanged && workspaceSlug) {
-      if(data[cycleKey]) {
-        addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() => setToast(errorToastProps));
-      } else {
-        removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps))
-      }
-      delete data[cycleKey];
-    }
-
-    if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
-      changeModulesInIssue(
-        workspaceSlug.toString(),
-        projectId,
-        issueId,
-        issueUpdates[moduleKey].ADD,
-        issueUpdates[moduleKey].REMOVE
-      ).catch(() => setToast(errorToastProps));
-      delete data[moduleKey];
-    }
-
-    updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
-  };
-
-  const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
-    if (
-      source.columnId &&
-      destination.columnId &&
-      destination.columnId === source.columnId &&
-      destination.id === source.id
-    )
-      return;
-
-    await handleGroupDragDrop(
-      source,
-      destination,
-      getIssueById,
-      issues.getIssueIds,
-      updateIssueOnDrop,
-      group_by,
-      sub_group_by,
-      orderBy !== "sort_order"
-    ).catch((err) => {
-      setToast({
-        title: "Error!",
-        type: TOAST_TYPE.ERROR,
-        message: err?.detail ?? "Failed to perform this action",
-      });
-    });
-  };
-
   const renderQuickActions: TRenderQuickActions = useCallback(
     ({ issue, parentRef, customActionButton }) => (
       <QuickActions

web/components/issues/issue-layouts/kanban/block.tsx

@@ -169,7 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
       }),
       dropTargetForElements({
         element,
-        canDrop: () => canDropOverIssue,
+        canDrop: ({ source }) => source?.data?.id !== issue?.id && canDropOverIssue,
         getData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragEnter: () => {
           setIsDraggingOverBlock(true);
@@ -182,7 +182,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
         },
       })
     );
-  }, [cardRef?.current, issue?.id, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
+  }, [cardRef?.current, issue?.id, isDragAllowed, canDropOverIssue, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
 
   if (!issue) return null;
 

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { AlertCircle } from "lucide-react";
+import { observer } from "mobx-react";
 //types
 import {
   TGroupedIssues,
@@ -14,13 +14,14 @@ import {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
-import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
 //components
+import { GroupDragOverlay } from "../group-drag-overlay";
 import { TRenderQuickActions } from "../list/list-view-types";
 import { GroupDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload, getIssueBlockId } from "../utils";
 import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
@@ -54,7 +55,7 @@ interface IKanbanGroup {
   orderBy: TIssueOrderByOptions | undefined;
 }
 
-export const KanbanGroup = (props: IKanbanGroup) => {
+export const KanbanGroup = observer((props: IKanbanGroup) => {
   const {
     groupId,
     sub_group_id,
@@ -108,7 +109,17 @@ export const KanbanGroup = (props: IKanbanGroup) => {
           const source = getSourceFromDropPayload(payload);
           const destination = getDestinationFromDropPayload(payload);
 
-          if (!source || !destination || isDropDisabled) return;
+          if (!source || !destination) return;
+
+          if (isDropDisabled) {
+            dropErrorMessage &&
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Warning!",
+                message: dropErrorMessage,
+              });
+            return;
+          }
 
           handleOnDrop(source, destination);
 
@@ -122,7 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         element,
       })
     );
-  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, handleOnDrop]);
+  }, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -178,7 +189,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
 
   const canDropOverIssue = orderBy === "sort_order";
   const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
-  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
 
   return (
     <div
@@ -190,45 +200,14 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       )}
       ref={columnRef}
     >
-      <div
+      <GroupDragOverlay
-        //column overlay when issues are not sorted by manual
+        dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
-        className={cn(
+        canDropOverIssue={canDropOverIssue}
-          "absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay",
+        isDropDisabled={isDropDisabled}
-          {
+        dropErrorMessage={dropErrorMessage}
-            "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
+        orderBy={orderBy}
-          },
+        isDraggingOverColumn={isDraggingOverColumn}
-          { hidden: !shouldOverlay },
+      />
-          { "justify-center": !sub_group_by }
-        )}
-      >
-        <div
-          className={cn(
-            "p-3 mt-8 flex flex-col rounded items-center",
-            {
-              "text-custom-text-200": shouldOverlay,
-            },
-            {
-              "text-custom-text-error": isDropDisabled,
-            }
-          )}
-        >
-          {dropErrorMessage ? (
-            <div className="flex items-center">
-              <AlertCircle width={13} height={13} /> &nbsp;
-              <span>{dropErrorMessage}</span>
-            </div>
-          ) : (
-            <>
-              {readableOrderBy && (
-                <span>
-                  The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
-                </span>
-              )}
-              <span>Drop here to move the issue.</span>
-            </>
-          )}
-        </div>
-      </div>
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
         groupId={groupId}
@@ -259,4 +238,4 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       )}
     </div>
   );
-};
+});

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { EIssuesStoreType } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 import { useIssues, useUser } from "@/hooks/store";
-
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // components
 import { List } from "./default";
@@ -17,9 +17,9 @@ type ListStoreType =
   | EIssuesStoreType.MODULE
   | EIssuesStoreType.CYCLE
   | EIssuesStoreType.PROJECT_VIEW
-  | EIssuesStoreType.ARCHIVED
   | EIssuesStoreType.DRAFT
-  | EIssuesStoreType.PROFILE;
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED;
 interface IBaseListRoot {
   QuickActions: FC<IQuickActionProps>;
   viewId?: string;
@@ -37,7 +37,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     canEditPropertiesBasedOnProject,
     isCompletedCycle = false,
   } = props;
-
+  // router
+  //stores
   const { issuesFilter, issues } = useIssues(storeType);
   const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
   // mobx store
@@ -66,8 +67,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   const displayProperties = issuesFilter?.issueFilters?.displayProperties;
 
   const group_by = displayFilters?.group_by || null;
+  const orderBy = displayFilters?.order_by || undefined;
   const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
 
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by);
+
   const renderQuickActions: TRenderQuickActions = useCallback(
     ({ issue, parentRef }) => (
       <QuickActions
@@ -91,6 +95,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         issuesMap={issueMap}
         displayProperties={displayProperties}
         group_by={group_by}
+        orderBy={orderBy}
         updateIssue={updateIssue}
         quickActions={renderQuickActions}
         issueIds={issueIds}
@@ -103,6 +108,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         storeType={storeType}
         addIssuesToView={addIssuesToView}
         isCompletedCycle={isCompletedCycle}
+        handleOnDrop={handleOnDrop}
       />
     </div>
   );

web/components/issues/issue-layouts/list/block-root.tsx

@@ -1,12 +1,18 @@
-import React, { FC, MutableRefObject, useState } from "react";
+import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
 // components
+import { DropIndicator } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { IssueBlock } from "@/components/issues/issue-layouts/list";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // types
+import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
 import { TRenderQuickActions } from "./list-view-types";
 
 type Props = {
@@ -20,6 +26,11 @@ type Props = {
   nestingLevel: number;
   spacingLeft?: number;
   containerRef: MutableRefObject<HTMLDivElement | null>;
+  groupId: string;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
+  isParentIssueBeingDragged?: boolean;
+  isLastChild?: boolean;
 };
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -27,6 +38,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     issueIds,
     issueId,
     issuesMap,
+    groupId,
     updateIssue,
     quickActions,
     canEditProperties,
@@ -34,26 +46,84 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     nestingLevel,
     spacingLeft = 14,
     containerRef,
+    isDragAllowed,
+    canDropOverIssue,
+    isParentIssueBeingDragged = false,
+    isLastChild = false,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
+  // ref
+  const issueBlockRef = useRef<HTMLDivElement | null>(null);
   // store hooks
   const { subIssues: subIssuesStore } = useIssueDetail();
 
+  const isSubIssue = nestingLevel !== 0;
+
+  useEffect(() => {
+    const blockElement = issueBlockRef.current;
+
+    if (!blockElement) return;
+
+    return combine(
+      dropTargetForElements({
+        element: blockElement,
+        canDrop: ({ source }) => source?.data?.id !== issueId && !isSubIssue && canDropOverIssue,
+        getData: ({ input, element }) => {
+          const data = { id: issueId, type: "ISSUE" };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: () => {
+          setInstruction(undefined);
+        },
+      })
+    );
+  }, [issueId, isLastChild, issueBlockRef, isSubIssue, canDropOverIssue, setInstruction]);
+
+  useOutsideClickDetector(issueBlockRef, () => {
+    issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
   if (!issueId) return null;
 
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   return (
-    <>
+    <div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
+      <DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
       <RenderIfVisible
         key={`${issueId}`}
         defaultHeight="3rem"
         root={containerRef}
-        classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
+        classNames={`relative ${isLastChild ? "" : "border-b border-b-custom-border-200"}`}
       >
         <IssueBlock
           issueId={issueId}
           issuesMap={issuesMap}
+          groupId={groupId}
           updateIssue={updateIssue}
           quickActions={quickActions}
           canEditProperties={canEditProperties}
@@ -62,6 +132,9 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
           setExpanded={setExpanded}
           nestingLevel={nestingLevel}
           spacingLeft={spacingLeft}
+          canDrag={!isSubIssue && isDragAllowed}
+          isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
+          setIsCurrentBlockDragging={setIsCurrentBlockDragging}
         />
       </RenderIfVisible>
 
@@ -81,8 +154,13 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
             nestingLevel={nestingLevel + 1}
             spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
             containerRef={containerRef}
+            groupId={groupId}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
+            isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
           />
         ))}
-    </>
+      {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
   );
 });

web/components/issues/issue-layouts/list/block.tsx

@@ -1,10 +1,12 @@
-import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
+import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
 import { ChevronRight } from "lucide-react";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // ui
-import { Spinner, Tooltip, ControlLink } from "@plane/ui";
+import { Spinner, Tooltip, ControlLink, DragHandle } from "@plane/ui";
 // components
 import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 // helpers
@@ -18,6 +20,7 @@ import { TRenderQuickActions } from "./list-view-types";
 interface IssueBlockProps {
   issueId: string;
   issuesMap: TIssueMap;
+  groupId: string;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -26,12 +29,16 @@ interface IssueBlockProps {
   spacingLeft?: number;
   isExpanded: boolean;
   setExpanded: Dispatch<SetStateAction<boolean>>;
+  isCurrentBlockDragging: boolean;
+  setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
+  canDrag: boolean;
 }
 
-export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
+export const IssueBlock = observer((props: IssueBlockProps) => {
   const {
     issuesMap,
     issueId,
+    groupId,
     updateIssue,
     quickActions,
     displayProperties,
@@ -40,9 +47,13 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     spacingLeft = 14,
     isExpanded,
     setExpanded,
+    isCurrentBlockDragging,
+    setIsCurrentBlockDragging,
+    canDrag,
   } = props;
-  // refs
+  // ref
-  const parentRef = useRef(null);
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef(null);
   // hooks
   const { workspaceSlug } = useAppRouter();
   const { getProjectIdentifierById } = useProject();
@@ -59,6 +70,29 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const issue = issuesMap[issueId];
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    const element = issueRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element || !dragHandleElement) return;
+
+    return combine(
+      draggable({
+        element,
+        dragHandle: dragHandleElement,
+        canDrag: () => canDrag,
+        getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
+        onDragStart: () => {
+          setIsCurrentBlockDragging(true);
+        },
+        onDrop: () => {
+          setIsCurrentBlockDragging(false);
+        },
+      })
+    );
+  }, [issueRef?.current, canDrag, issueId, groupId, dragHandleRef?.current, setIsCurrentBlockDragging]);
+
   if (!issue) return null;
 
   const canEditIssueProperties = canEditProperties(issue.project_id);
@@ -84,13 +118,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
   return (
     <div
-      ref={parentRef}
+      ref={issueRef}
       className={cn(
-        "min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
+        "group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
         {
           "border border-custom-primary-70 hover:border-custom-primary-70":
             getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
+          "bg-custom-background-80": isCurrentBlockDragging,
         }
       )}
     >
@@ -98,11 +133,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         <div className="flex flex-grow items-center gap-3 truncate">
           <div className="flex items-center gap-0.5">
             <div className="flex items-center group">
-              <span className="size-3.5" />
+              <DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
-              <div className="flex h-4 w-4 items-center justify-center">
+              <div className="flex h-5 w-5 items-center justify-center">
                 {subIssuesCount > 0 && (
                   <button
-                    className="flex items-center justify-center h-4 w-4 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
+                    className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
@@ -146,7 +181,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           <div className="block md:hidden border border-custom-border-300 rounded ">
             {quickActions({
               issue,
-              parentRef,
+              parentRef: issueRef,
             })}
           </div>
         )}
@@ -165,7 +200,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
             <div className="hidden md:block">
               {quickActions({
                 issue,
-                parentRef,
+                parentRef: issueRef,
               })}
             </div>
           </>

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -1,27 +1,42 @@
 import { FC, MutableRefObject } from "react";
 // components
-import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
+import { TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
 import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
 // types
 import { TRenderQuickActions } from "./list-view-types";
 
 interface Props {
-  issueIds: TGroupedIssues | TUnGroupedIssues | any;
+  issueIds: TUnGroupedIssues;
   issuesMap: TIssueMap;
+  groupId: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
   containerRef: MutableRefObject<HTMLDivElement | null>;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
+  const {
+    issueIds,
+    issuesMap,
+    groupId,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    containerRef,
+    isDragAllowed,
+    canDropOverIssue,
+  } = props;
 
   return (
     <div className="relative h-full w-full">
-      {issueIds && issueIds.length > 0 ? (
+      {issueIds &&
-        issueIds.map((issueId: string) => (
+        issueIds.length > 0 &&
+        issueIds.map((issueId: string, index) => (
           <IssueBlockRoot
             key={`${issueId}`}
             issueIds={issueIds}
@@ -34,11 +49,12 @@ export const IssueBlocksList: FC<Props> = (props) => {
             nestingLevel={0}
             spacingLeft={0}
             containerRef={containerRef}
+            groupId={groupId}
+            isLastChild={index === issueIds.length - 1}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
           />
-        ))
+        ))}
-      ) : (
-        <div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
-      )}
     </div>
   );
 };

web/components/issues/issue-layouts/list/default.tsx

@@ -1,4 +1,6 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 // components
 import {
   GroupByColumnTypes,
@@ -8,20 +10,22 @@ import {
   TIssueMap,
   TUnGroupedIssues,
   IGroupByColumn,
+  TIssueOrderByOptions,
+  TIssueGroupByOptions,
 } from "@plane/types";
-import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
 // hooks
 import { EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 // utils
-import { getGroupByColumns, isWorkspaceLevel } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
-import { HeaderGroupByCard } from "./headers/group-by-card";
+import { ListGroup } from "./list-group";
 import { TRenderQuickActions } from "./list-view-types";
 
 export interface IGroupByList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
-  group_by: string | null;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -36,6 +40,7 @@ export interface IGroupByList {
   ) => Promise<TIssue | undefined>;
   disableIssueCreation?: boolean;
   storeType: EIssuesStoreType;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
   isCompletedCycle?: boolean;
@@ -46,6 +51,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
+    orderBy,
     updateIssue,
     quickActions,
     displayProperties,
@@ -56,6 +62,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     viewId,
     disableIssueCreation,
     storeType,
+    handleOnDrop,
     addIssuesToView,
     isCompletedCycle = false,
   } = props;
@@ -81,46 +88,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     isWorkspaceLevel(storeType)
   );
 
+  // Enable Auto Scroll for Main Kanban
+  useEffect(() => {
+    const element = containerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [containerRef]);
+
   if (!groups) return null;
 
-  const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
-    const defaultState = projectState.projectStates?.find((state) => state.default);
-    let preloadedData: object = { state_id: defaultState?.id };
-
-    if (groupByKey === null) {
-      preloadedData = { ...preloadedData };
-    } else {
-      if (groupByKey === "state") {
-        preloadedData = { ...preloadedData, state_id: value };
-      } else if (groupByKey === "priority") {
-        preloadedData = { ...preloadedData, priority: value };
-      } else if (groupByKey === "labels" && value != "None") {
-        preloadedData = { ...preloadedData, label_ids: [value] };
-      } else if (groupByKey === "assignees" && value != "None") {
-        preloadedData = { ...preloadedData, assignee_ids: [value] };
-      } else if (groupByKey === "cycle" && value != "None") {
-        preloadedData = { ...preloadedData, cycle_id: value };
-      } else if (groupByKey === "module" && value != "None") {
-        preloadedData = { ...preloadedData, module_ids: [value] };
-      } else if (groupByKey === "created_by") {
-        preloadedData = { ...preloadedData };
-      } else {
-        preloadedData = { ...preloadedData, [groupByKey]: value };
-      }
-    }
-
-    return preloadedData;
-  };
-
   const validateEmptyIssueGroups = (issues: TIssue[]) => {
     const issuesCount = issues?.length || 0;
     if (!showEmptyGroup && issuesCount <= 0) return false;
     return true;
   };
 
-  const is_list = group_by === null ? true : false;
+  const getGroupIndex = (groupId: string | undefined) => groups.findIndex(({ id }) => id === groupId);
 
-  const isGroupByCreatedBy = group_by === "created_by";
+  const is_list = group_by === null ? true : false;
 
   return (
     <div
@@ -130,43 +121,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
       {groups &&
         groups.length > 0 &&
         groups.map(
-          (_list: IGroupByColumn) =>
+          (group: IGroupByColumn) =>
-            validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
+            validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
-              <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
+              <ListGroup
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
+                key={group.id}
-                  <HeaderGroupByCard
+                group={group}
-                    icon={_list.icon}
+                getGroupIndex={getGroupIndex}
-                    title={_list.name || ""}
+                issueIds={issueIds}
-                    count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
+                issuesMap={issuesMap}
-                    issuePayload={_list.payload}
+                group_by={group_by}
-                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
+                orderBy={orderBy}
-                    storeType={storeType}
+                updateIssue={updateIssue}
-                    addIssuesToView={addIssuesToView}
+                quickActions={quickActions}
-                  />
+                displayProperties={displayProperties}
-                </div>
+                enableIssueQuickAdd={enableIssueQuickAdd}
-
+                canEditProperties={canEditProperties}
-                {issueIds && (
+                storeType={storeType}
-                  <IssueBlocksList
+                containerRef={containerRef}
-                    issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
+                quickAddCallback={quickAddCallback}
-                    issuesMap={issuesMap}
+                disableIssueCreation={disableIssueCreation}
-                    updateIssue={updateIssue}
+                addIssuesToView={addIssuesToView}
-                    quickActions={quickActions}
+                handleOnDrop={handleOnDrop}
-                    displayProperties={displayProperties}
+                viewId={viewId}
-                    canEditProperties={canEditProperties}
+                isCompletedCycle={isCompletedCycle}
-                    containerRef={containerRef}
+              />
-                  />
-                )}
-
-                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
-                  <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
-                    <ListQuickAddIssueForm
-                      prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
-                      quickAddCallback={quickAddCallback}
-                      viewId={viewId}
-                    />
-                  </div>
-                )}
-              </div>
             )
         )}
     </div>
@@ -176,7 +154,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
 export interface IList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
-  group_by: string | null;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -192,6 +171,7 @@ export interface IList {
   viewId?: string;
   disableIssueCreation?: boolean;
   storeType: EIssuesStoreType;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   isCompletedCycle?: boolean;
 }
@@ -201,6 +181,7 @@ export const List: React.FC<IList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
+    orderBy,
     updateIssue,
     quickActions,
     quickAddCallback,
@@ -211,6 +192,7 @@ export const List: React.FC<IList> = (props) => {
     canEditProperties,
     disableIssueCreation,
     storeType,
+    handleOnDrop,
     addIssuesToView,
     isCompletedCycle = false,
   } = props;
@@ -221,6 +203,7 @@ export const List: React.FC<IList> = (props) => {
         issueIds={issueIds as TUnGroupedIssues}
         issuesMap={issuesMap}
         group_by={group_by}
+        orderBy={orderBy}
         updateIssue={updateIssue}
         quickActions={quickActions}
         displayProperties={displayProperties}
@@ -231,6 +214,7 @@ export const List: React.FC<IList> = (props) => {
         viewId={viewId}
         disableIssueCreation={disableIssueCreation}
         storeType={storeType}
+        handleOnDrop={handleOnDrop}
         addIssuesToView={addIssuesToView}
         isCompletedCycle={isCompletedCycle}
       />

web/components/issues/issue-layouts/list/list-group.tsx

@@ -0,0 +1,242 @@
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import { cn } from "@plane/editor-core";
+// plane
+import {
+  IGroupByColumn,
+  IIssueDisplayProperties,
+  TGroupedIssues,
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueMap,
+  TIssueOrderByOptions,
+  TUnGroupedIssues,
+} from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { DRAG_ALLOWED_GROUPS, EIssuesStoreType } from "@/constants/issue";
+// hooks
+import { useProjectState } from "@/hooks/store";
+// components
+import { GroupDragOverlay } from "../group-drag-overlay";
+import {
+  GroupDropLocation,
+  getDestinationFromDropPayload,
+  getIssueBlockId,
+  getSourceFromDropPayload,
+  highlightIssueOnDrop,
+} from "../utils";
+import { IssueBlocksList } from "./blocks-list";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { TRenderQuickActions } from "./list-view-types";
+import { ListQuickAddIssueForm } from "./quick-add-issue-form";
+
+type Props = {
+  issueIds: TGroupedIssues | TUnGroupedIssues | any;
+  group: IGroupByColumn;
+  issuesMap: TIssueMap;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
+  getGroupIndex: (groupId: string | undefined) => number;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableIssueQuickAdd: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  storeType: EIssuesStoreType;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  viewId?: string;
+  isCompletedCycle?: boolean;
+};
+
+export const ListGroup = observer((props: Props) => {
+  const {
+    group,
+    issueIds,
+    group_by,
+    orderBy,
+    issuesMap,
+    getGroupIndex,
+    disableIssueCreation,
+    addIssuesToView,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    quickAddCallback,
+    containerRef,
+    viewId,
+    handleOnDrop,
+    enableIssueQuickAdd,
+    isCompletedCycle,
+    storeType,
+  } = props;
+
+  const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
+  const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start");
+  const groupRef = useRef<HTMLDivElement | null>(null);
+
+  const projectState = useProjectState();
+
+  const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
+    const defaultState = projectState.projectStates?.find((state) => state.default);
+    let preloadedData: object = { state_id: defaultState?.id };
+
+    if (groupByKey === null) {
+      preloadedData = { ...preloadedData };
+    } else {
+      if (groupByKey === "state") {
+        preloadedData = { ...preloadedData, state_id: value };
+      } else if (groupByKey === "priority") {
+        preloadedData = { ...preloadedData, priority: value };
+      } else if (groupByKey === "labels" && value != "None") {
+        preloadedData = { ...preloadedData, label_ids: [value] };
+      } else if (groupByKey === "assignees" && value != "None") {
+        preloadedData = { ...preloadedData, assignee_ids: [value] };
+      } else if (groupByKey === "cycle" && value != "None") {
+        preloadedData = { ...preloadedData, cycle_id: value };
+      } else if (groupByKey === "module" && value != "None") {
+        preloadedData = { ...preloadedData, module_ids: [value] };
+      } else if (groupByKey === "created_by") {
+        preloadedData = { ...preloadedData };
+      } else {
+        preloadedData = { ...preloadedData, [groupByKey]: value };
+      }
+    }
+
+    return preloadedData;
+  };
+
+  useEffect(() => {
+    const element = groupRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ groupId: group.id, type: "COLUMN" }),
+        onDragEnter: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOverColumn(false);
+        },
+        onDragStart: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDrag: ({ source }) => {
+          const sourceGroupId = source?.data?.groupId as string | undefined;
+          const currentGroupId = group.id;
+
+          const sourceIndex = getGroupIndex(sourceGroupId);
+          const currentIndex = getGroupIndex(currentGroupId);
+
+          if (sourceIndex > currentIndex) {
+            setDragColumnOrientation("justify-end");
+          } else {
+            setDragColumnOrientation("justify-start");
+          }
+        },
+        onDrop: (payload) => {
+          setIsDraggingOverColumn(false);
+          const source = getSourceFromDropPayload(payload);
+          const destination = getDestinationFromDropPayload(payload);
+
+          if (!source || !destination) return;
+
+          if (group.isDropDisabled) {
+            group.dropErrorMessage &&
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Warning!",
+                message: group.dropErrorMessage,
+              });
+            return;
+          }
+
+          handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order");
+        },
+      })
+    );
+  }, [groupRef?.current, group, orderBy, getGroupIndex, setDragColumnOrientation, setIsDraggingOverColumn]);
+
+  const is_list = group_by === null ? true : false;
+  const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
+  const canDropOverIssue = orderBy === "sort_order";
+
+  const issueCount: number = is_list ? issueIds?.length ?? 0 : issueIds?.[group.id]?.length ?? 0;
+
+  const isGroupByCreatedBy = group_by === "created_by";
+
+  return (
+    <div
+      ref={groupRef}
+      className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
+        "border-custom-primary-100 ": isDraggingOverColumn,
+      })}
+    >
+      <div className="sticky top-0 z-[3] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
+        <HeaderGroupByCard
+          icon={group.icon}
+          title={group.name || ""}
+          count={issueCount}
+          issuePayload={group.payload}
+          disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
+          storeType={storeType}
+          addIssuesToView={addIssuesToView}
+        />
+      </div>
+
+      {!!issueCount && (
+        <div className="relative">
+          <GroupDragOverlay
+            dragColumnOrientation={dragColumnOrientation}
+            canDropOverIssue={canDropOverIssue}
+            isDropDisabled={!!group.isDropDisabled}
+            dropErrorMessage={group.dropErrorMessage}
+            orderBy={orderBy}
+            isDraggingOverColumn={isDraggingOverColumn}
+          />
+          {issueIds && (
+            <IssueBlocksList
+              issueIds={is_list ? issueIds : issueIds?.[group.id]}
+              groupId={group.id}
+              issuesMap={issuesMap}
+              updateIssue={updateIssue}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              canEditProperties={canEditProperties}
+              containerRef={containerRef}
+              isDragAllowed={isDragAllowed}
+              canDropOverIssue={canDropOverIssue}
+            />
+          )}
+
+          {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
+            <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
+              <ListQuickAddIssueForm
+                prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
+                quickAddCallback={quickAddCallback}
+                viewId={viewId}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/utils.tsx

@@ -1,3 +1,4 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
@@ -37,6 +38,7 @@ export type GroupDropLocation = {
   groupId: string;
   subGroupId?: string;
   id: string | undefined;
+  canAddIssueBelow?: boolean;
 };
 
 export type IssueUpdates = {
@@ -353,11 +355,15 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): G
 
   if (!destinationColumnData?.groupId) return;
 
+  // extract instruction from destination issue
+  const extractedInstruction = destinationIssueData ? extractInstruction(destinationIssueData)?.type : "";
+
   return {
     groupId: destinationColumnData.groupId as string,
     subGroupId: destinationColumnData.subGroupId as string,
     columnId: destinationColumnData.columnId as string,
     id: destinationIssueData?.id as string | undefined,
+    canAddIssueBelow: extractedInstruction === "reorder-below",
   };
 };
 
@@ -372,17 +378,25 @@ const handleSortOrder = (
   destinationIssues: string[],
   destinationIssueId: string | undefined,
   getIssueById: (issueId: string) => TIssue | undefined,
-  shouldAddIssueAtTop = false
+  shouldAddIssueAtTop = false,
+  canAddIssueBelow = false
 ) => {
   const sortOrderDefaultValue = 65535;
   let currentIssueState = {};
 
-  const destinationIndex = destinationIssueId
+  let destinationIndex = destinationIssueId
     ? destinationIssues.indexOf(destinationIssueId)
     : shouldAddIssueAtTop
       ? 0
       : destinationIssues.length;
 
+  const isDestinationLastChild = destinationIndex === destinationIssues.length - 1;
+
+  // if issue can be added below and if the destination issue is the last child, then add to the end of the list
+  if (canAddIssueBelow && isDestinationLastChild) {
+    destinationIndex = destinationIssues.length;
+  }
+
   if (destinationIssues && destinationIssues.length > 0) {
     if (destinationIndex === 0) {
       const destinationIssueId = destinationIssues[0];
@@ -428,7 +442,7 @@ const handleSortOrder = (
 export const getIssueBlockId = (
   issueId: string | undefined,
   groupId: string | undefined,
-  subGroupId: string | undefined
+  subGroupId?: string | undefined
 ) => `issue_${issueId}_${groupId}_${subGroupId}`;
 
 /**
@@ -469,7 +483,13 @@ export const handleGroupDragDrop = async (
   // for both horizontal and vertical dnd
   updatedIssue = {
     ...updatedIssue,
-    ...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
+    ...handleSortOrder(
+      destinationIssues,
+      destination.id,
+      getIssueById,
+      shouldAddIssueAtTop,
+      !!destination.canAddIssueBelow
+    ),
   };
 
   // update updatedIssue values based on the source and destination groupIds

web/components/labels/label-block/label-item-block.tsx

@@ -2,12 +2,11 @@ import { MutableRefObject, useRef, useState } from "react";
 import { LucideIcon, X } from "lucide-react";
 import { IIssueLabel } from "@plane/types";
 //ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, DragHandle } from "@plane/ui";
 //types
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 //hooks
 //components
-import { DragHandle } from "./drag-handle";
 import { LabelName } from "./label-name";
 
 //types

web/constants/issue.ts

@@ -12,6 +12,15 @@ import {
   TIssueTypeFilters,
 } from "@plane/types";
 
+export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
+  "state",
+  "priority",
+  "assignees",
+  "labels",
+  "module",
+  "cycle",
+];
+
 export enum EIssuesStoreType {
   GLOBAL = "GLOBAL",
   PROFILE = "PROFILE",
@@ -422,3 +431,4 @@ export const groupReactionEmojis = (reactions: any) => {
 
   return groupedEmojis;
 };
+

web/hooks/use-group-dragndrop.ts

@@ -0,0 +1,124 @@
+import { useRouter } from "next/router";
+import { TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { GroupDropLocation, handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
+import { EIssuesStoreType } from "@/constants/issue";
+import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
+import { useIssueDetail, useIssues } from "./store";
+import { useIssuesActions } from "./use-issues-actions";
+
+type DNDStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.DRAFT
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED;
+
+export const useGroupIssuesDragNDrop = (
+  storeType: DNDStoreType,
+  orderBy: TIssueOrderByOptions | undefined,
+  groupBy: TIssueGroupByOptions | undefined,
+  subGroupBy?: TIssueGroupByOptions
+) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { updateIssue } = useIssuesActions(storeType);
+  const {
+    issues: { getIssueIds },
+  } = useIssues(storeType);
+  const {
+    issues: { addCycleToIssue, removeCycleFromIssue },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const {
+    issues: { changeModulesInIssue },
+  } = useIssues(EIssuesStoreType.MODULE);
+
+  /**
+   * update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
+   * @param projectId
+   * @param issueId
+   * @param data
+   * @param issueUpdates
+   */
+  const updateIssueOnDrop = async (
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    issueUpdates: {
+      [groupKey: string]: {
+        ADD: string[];
+        REMOVE: string[];
+      };
+    }
+  ) => {
+    const errorToastProps = {
+      type: TOAST_TYPE.ERROR,
+      title: "Error!",
+      message: "Error while updating issue",
+    };
+    const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
+    const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
+
+    const isModuleChanged = Object.keys(data).includes(moduleKey);
+    const isCycleChanged = Object.keys(data).includes(cycleKey);
+
+    if (isCycleChanged && workspaceSlug) {
+      if (data[cycleKey]) {
+        addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() =>
+          setToast(errorToastProps)
+        );
+      } else {
+        removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps));
+      }
+      delete data[cycleKey];
+    }
+
+    if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
+      changeModulesInIssue(
+        workspaceSlug.toString(),
+        projectId,
+        issueId,
+        issueUpdates[moduleKey].ADD,
+        issueUpdates[moduleKey].REMOVE
+      ).catch(() => setToast(errorToastProps));
+      delete data[moduleKey];
+    }
+
+    updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
+  };
+
+  const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
+    if (
+      source.columnId &&
+      destination.columnId &&
+      destination.columnId === source.columnId &&
+      destination.id === source.id
+    )
+      return;
+
+    await handleGroupDragDrop(
+      source,
+      destination,
+      getIssueById,
+      getIssueIds,
+      updateIssueOnDrop,
+      groupBy,
+      subGroupBy,
+      orderBy !== "sort_order"
+    ).catch((err) => {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: err?.detail ?? "Failed to perform this action",
+      });
+    });
+  };
+
+  return handleOnDrop;
+};

web/store/issue/archived/issue.store.ts

@@ -17,6 +17,7 @@ export interface IArchivedIssues {
   // computed
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   // actions
+  getIssueIds: (groupId?: string) => string[] | undefined;
   fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue[]>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -84,6 +85,26 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
     return issues;
   }
 
+  getIssueIds = (groupId?: string) => {
+    const groupedIssueIds = this.groupedIssueIds;
+
+    const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
+    if (!displayFilters || !groupedIssueIds) return undefined;
+
+    const subGroupBy = displayFilters?.sub_group_by;
+    const groupBy = displayFilters?.group_by;
+
+    if (!groupBy && !subGroupBy) {
+      return groupedIssueIds as string[];
+    }
+
+    if (groupBy && groupId) {
+      return (groupedIssueIds as TGroupedIssues)?.[groupId] as string[];
+    }
+
+    return undefined;
+  };
+
   fetchIssues = async (workspaceSlug: string, projectId: string, loadType: TLoader = "init-loader") => {
     try {
       this.loader = loadType;

web/store/issue/issue_kanban_view.store.ts

@@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 import { IssueRootStore } from "./root.store";
 import { TIssueGroupByOptions } from "@plane/types";
+import { DRAG_ALLOWED_GROUPS } from "@/constants/issue";
 // types
 
 export interface IIssueKanBanViewStore {
@@ -22,8 +23,6 @@ export interface IIssueKanBanViewStore {
   setIsDragging: (isDragging: boolean) => void;
 }
 
-const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = ["state", "priority", "assignees", "labels", "module", "cycle"];
-
 export class IssueKanBanViewStore implements IIssueKanBanViewStore {
   kanBanToggle: {
     groupByHeaderMinMax: string[];