Create Drag and Drop wrapper

https://youtrack.weseek.co.jp/issue/GW-7927

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -3,7 +3,6 @@ import {
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { useDrag, useDrop } from 'react-dnd';
 import { DropdownToggle } from 'reactstrap';
 
 import {
@@ -12,8 +11,10 @@ import {
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { FolderIcon } from '~/components/Icons/FolderIcon';
 import { TriangleIcon } from '~/components/Icons/TriangleIcon';
-import { BookmarkFolderItems, DragItemType, DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
-import { IPageHasId, IPageToDeleteWithMeta } from '~/interfaces/page';
+import {
+  BookmarkFolderItems, DragItemDataType, DragItemType, DRAG_ITEM_TYPE,
+} from '~/interfaces/bookmark-info';
+import { IPageToDeleteWithMeta } from '~/interfaces/page';
 import { onDeletedBookmarkFolderFunction, OnDeletedFunction } from '~/interfaces/ui';
 import { useSWRBookmarkInfo, useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
@@ -23,6 +24,7 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { BookmarkFolderItemControl } from './BookmarkFolderItemControl';
 import { BookmarkFolderNameInput } from './BookmarkFolderNameInput';
 import { BookmarkItem } from './BookmarkItem';
+import { DragAndDropWrapper } from './DragAndDropWrapper';
 
 
 type BookmarkFolderItemProps = {
@@ -33,10 +35,6 @@ type BookmarkFolderItemProps = {
   isUserHomePage?: boolean
 }
 
-type DragItemDataType = {
-  parentFolder: BookmarkFolderItems
-} & BookmarkFolderItemProps & IPageHasId
-
 export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
   const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
   const {
@@ -61,7 +59,6 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
 
   const childrenExists = hasChildren(children);
 
-
   const loadChildFolder = useCallback(async() => {
     setIsOpen(!isOpen);
     setTargetFolder(folderId);
@@ -129,28 +126,15 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     mutateBookmarkInfo();
   }, [mutateBookmarkInfo, mutateBookmarkData]);
 
-  const [, bookmarkFolderDragRef] = useDrag({
-    type: DRAG_ITEM_TYPE.FOLDER,
-    item: props,
-    end: (_item, monitor) => {
-      const dropResult = monitor.getDropResult();
-      if (dropResult != null) {
-        mutateBookmarkData();
-      }
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-      canDrag: monitor.canDrag(),
-    }),
-  });
-
 
   const itemDropHandler = async(item: DragItemDataType, dragItemType: string | symbol | null) => {
     if (dragItemType === DRAG_ITEM_TYPE.FOLDER) {
       try {
-        await updateBookmarkFolder(item.bookmarkFolder._id, item.bookmarkFolder.name, bookmarkFolder._id);
-        mutateBookmarkData();
-        toastSuccess(t('toaster.update_successed', { target: t('bookmark_folder.bookmark_folder'), ns: 'commons' }));
+        if (item.bookmarkFolder != null) {
+          await updateBookmarkFolder(item.bookmarkFolder._id, item.bookmarkFolder.name, bookmarkFolder._id);
+          mutateBookmarkData();
+          toastSuccess(t('toaster.update_successed', { target: t('bookmark_folder.bookmark_folder'), ns: 'commons' }));
+        }
       }
       catch (err) {
         toastError(err);
@@ -158,10 +142,12 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     }
     else {
       try {
-        await addBookmarkToFolder(item._id, bookmarkFolder._id);
-        mutateBookmarkData();
-        await mutateUserBookmarks();
-        toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+        if (item != null) {
+          await addBookmarkToFolder(item._id, bookmarkFolder._id);
+          mutateBookmarkData();
+          await mutateUserBookmarks();
+          toastSuccess(t('toaster.add_succeeded', { target: t('bookmark_folder.bookmark'), ns: 'commons' }));
+        }
       }
       catch (err) {
         toastError(err);
@@ -169,12 +155,12 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     }
   };
 
-  const isDroppable = (item: DragItemDataType, targetRoot: string, targetLevel: number, type: string | null| symbol): boolean => {
+  const isDroppable = (item: DragItemDataType, type: string | null| symbol): boolean => {
     if (type === DRAG_ITEM_TYPE.FOLDER) {
       if (item.bookmarkFolder.parent === bookmarkFolder._id || item.bookmarkFolder._id === bookmarkFolder._id) {
         return false;
       }
-      return item.root !== targetRoot || item.level >= targetLevel;
+      return item.root !== root || item.level >= level;
     }
 
     if (item.parentFolder != null && item.parentFolder._id === bookmarkFolder._id) {
@@ -183,21 +169,6 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
     return true;
   };
 
-  const [{ isOver }, dropRef] = useDrop(() => ({
-    accept: acceptedTypes,
-    drop: (item: DragItemDataType, monitor) => {
-      const itemType = monitor.getItemType();
-      itemDropHandler(item, itemType);
-    },
-    canDrop: (item: DragItemDataType, monitor) => {
-      const itemType = monitor.getItemType();
-      return isDroppable(item, root, level, itemType);
-    },
-    collect: monitor => ({
-      isOver: monitor.isOver({ shallow: true }) && monitor.canDrop(),
-    }),
-  }));
-
 
   const renderChildFolder = () => {
     return isOpen && children?.map((childFolder) => {
@@ -253,61 +224,71 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
 
   return (
     <div id={`grw-bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
-      <li ref={(c) => { bookmarkFolderDragRef(c); dropRef(c) }}
-        className={`${isOver ? 'grw-accept-drop-item' : ''} list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center`}
-        onClick={loadChildFolder}
+      <DragAndDropWrapper
+        key={folderId}
+        type={acceptedTypes}
+        item={props}
+        useDragMode={true}
+        useDropMode={true}
+        onDropItem={itemDropHandler}
+        isDropable={isDroppable}
       >
-        <div className="grw-triangle-container d-flex justify-content-center">
-          {childrenExists && (
+        <li
+          className={' list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center'}
+          onClick={loadChildFolder}
+        >
+          <div className="grw-triangle-container d-flex justify-content-center">
+            {childrenExists && (
+              <button
+                type="button"
+                className={`grw-foldertree-triangle-btn btn ${isOpen ? 'grw-foldertree-open' : ''}`}
+                onClick={loadChildFolder}
+              >
+                <div className="d-flex justify-content-center">
+                  <TriangleIcon />
+                </div>
+              </button>
+            )}
+          </div>
+          {
+            <div>
+              <FolderIcon isOpen={isOpen} />
+            </div>
+          }
+          {isRenameAction ? (
+            <BookmarkFolderNameInput
+              onClickOutside={() => setIsRenameAction(false)}
+              onPressEnter={onPressEnterHandlerForRename}
+              value={name}
+            />
+          ) : (
+            <>
+              <div className='grw-foldertree-title-anchor pl-2' >
+                <p className={'text-truncate m-auto '}>{name}</p>
+              </div>
+            </>
+          )}
+          <div className="grw-foldertree-control d-flex">
+            <BookmarkFolderItemControl
+              onClickRename={onClickRenameHandler}
+              onClickDelete={onClickDeleteHandler}
+            >
+              <div onClick={e => e.stopPropagation()}>
+                <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+                  <i className="icon-options fa fa-rotate-90 p-1"></i>
+                </DropdownToggle>
+              </div>
+            </BookmarkFolderItemControl>
             <button
               type="button"
-              className={`grw-foldertree-triangle-btn btn ${isOpen ? 'grw-foldertree-open' : ''}`}
-              onClick={loadChildFolder}
+              className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
+              onClick={onClickPlusButton}
             >
-              <div className="d-flex justify-content-center">
-                <TriangleIcon />
-              </div>
+              <i className="icon-plus d-block p-0" />
             </button>
-          )}
-        </div>
-        {
-          <div>
-            <FolderIcon isOpen={isOpen} />
           </div>
-        }
-        {isRenameAction ? (
-          <BookmarkFolderNameInput
-            onClickOutside={() => setIsRenameAction(false)}
-            onPressEnter={onPressEnterHandlerForRename}
-            value={name}
-          />
-        ) : (
-          <>
-            <div className='grw-foldertree-title-anchor pl-2' >
-              <p className={'text-truncate m-auto '}>{name}</p>
-            </div>
-          </>
-        )}
-        <div className="grw-foldertree-control d-flex">
-          <BookmarkFolderItemControl
-            onClickRename={onClickRenameHandler}
-            onClickDelete={onClickDeleteHandler}
-          >
-            <div onClick={e => e.stopPropagation()}>
-              <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
-                <i className="icon-options fa fa-rotate-90 p-1"></i>
-              </DropdownToggle>
-            </div>
-          </BookmarkFolderItemControl>
-          <button
-            type="button"
-            className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
-            onClick={onClickPlusButton}
-          >
-            <i className="icon-plus d-block p-0" />
-          </button>
-        </div>
-      </li>
+        </li>
+      </DragAndDropWrapper>
       {isCreateAction && (
         <div className="flex-fill">
           <BookmarkFolderNameInput

packages/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import nodePath from 'path';
 
 import { DevidedPagePath, pathUtils } from '@growi/core';
-import { useDrag } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
@@ -11,7 +10,7 @@ import { unbookmark } from '~/client/services/page-operation';
 import { renamePage } from '~/client/util/bookmark-utils';
 import { ValidationTarget } from '~/client/util/input-validator';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { BookmarkFolderItems, DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
+import { BookmarkFolderItems, DragItemDataType, DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxPageInfo } from '~/stores/page';
@@ -20,6 +19,7 @@ import ClosableTextInput from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
 import { PageListItemS } from '../PageList/PageListItemS';
 
+import { DragAndDropWrapper } from './DragAndDropWrapper';
 
 type Props = {
   bookmarkedPage: IPageHasId,
@@ -41,6 +41,10 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   const { mutate: mutateBookamrkData } = useSWRxBookamrkFolderAndChild();
   const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
 
+  const dragItem: Partial<DragItemDataType> = {
+    ...bookmarkedPage, parentFolder,
+  };
+
   useEffect(() => {
     mutateBookamrkData();
   }, [mutateBookamrkData]);
@@ -92,59 +96,51 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     onClickDeleteMenuItem(pageToDelete);
   }, [bookmarkedPage, onClickDeleteMenuItem]);
 
-  const [, bookmarkItemDragRef] = useDrag({
-    type: DRAG_ITEM_TYPE.BOOKMARK,
-    item: { ...bookmarkedPage, parentFolder },
-    end: (_, monitor) => {
-      if (monitor.getDropResult() != null) {
-        mutateBookamrkData();
-      }
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-      canDrag: monitor.canDrag(),
-    }),
-  });
-
   return (
-    <li
-      className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
-      key={bookmarkedPage._id} ref={(c) => { bookmarkItemDragRef(c) }}
-      id={bookmarkItemId}
+    <DragAndDropWrapper
+      item={dragItem}
+      type={[DRAG_ITEM_TYPE.BOOKMARK]}
+      useDragMode={true}
     >
-      { isRenameInputShown ? (
-        <ClosableTextInput
-          value={nodePath.basename(bookmarkedPage.path ?? '')}
-          placeholder={t('Input page name')}
-          onClickOutside={() => { setRenameInputShown(false) }}
-          onPressEnter={pressEnterForRenameHandler}
-          validationTarget={ValidationTarget.PAGE}
-        />
-      ) : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle}/>}
-      <div className='grw-foldertree-control'>
-        <PageItemControl
-          pageId={bookmarkedPage._id}
-          isEnableActions
-          pageInfo={fetchedPageInfo}
-          forceHideMenuItems={[MenuItemType.DUPLICATE]}
-          onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-          onClickRenameMenuItem={renameMenuItemClickHandler}
-          onClickDeleteMenuItem={deleteMenuItemClickHandler}
-        >
-          <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
-            <i className="icon-options fa fa-rotate-90 p-1"></i>
-          </DropdownToggle>
-        </PageItemControl>
-      </div>
-      <UncontrolledTooltip
-        modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
-        autohide={false}
-        placement="right"
-        target={bookmarkItemId}
-        fade={false}
+      <li
+        className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
+        key={bookmarkedPage._id}
+        id={bookmarkItemId}
       >
-        {formerPagePath !== null ? `${formerPagePath}/` : '/'}
-      </UncontrolledTooltip>
-    </li>
+        { isRenameInputShown ? (
+          <ClosableTextInput
+            value={nodePath.basename(bookmarkedPage.path ?? '')}
+            placeholder={t('Input page name')}
+            onClickOutside={() => { setRenameInputShown(false) }}
+            onPressEnter={pressEnterForRenameHandler}
+            validationTarget={ValidationTarget.PAGE}
+          />
+        ) : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle}/>}
+        <div className='grw-foldertree-control'>
+          <PageItemControl
+            pageId={bookmarkedPage._id}
+            isEnableActions
+            pageInfo={fetchedPageInfo}
+            forceHideMenuItems={[MenuItemType.DUPLICATE]}
+            onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+            onClickRenameMenuItem={renameMenuItemClickHandler}
+            onClickDeleteMenuItem={deleteMenuItemClickHandler}
+          >
+            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+              <i className="icon-options fa fa-rotate-90 p-1"></i>
+            </DropdownToggle>
+          </PageItemControl>
+        </div>
+        <UncontrolledTooltip
+          modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
+          autohide={false}
+          placement="right"
+          target={bookmarkItemId}
+          fade={false}
+        >
+          {formerPagePath !== null ? `${formerPagePath}/` : '/'}
+        </UncontrolledTooltip>
+      </li>
+    </DragAndDropWrapper>
   );
 };

packages/app/src/components/Bookmarks/DragAndDropWrapper.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+
+import { useDrag, useDrop } from 'react-dnd';
+
+import { DragItemDataType } from '~/interfaces/bookmark-info';
+
+type DragAndDropWrapperProps = {
+  item: Partial<DragItemDataType>
+  type: string[]
+  children: ReactNode
+  useDragMode?: boolean
+  useDropMode?: boolean
+  onDropItem?:(item: DragItemDataType, type: string | null | symbol) => Promise<void>
+  isDropable?:(item: Partial<DragItemDataType>, type: string | null | symbol) => boolean
+}
+
+export const DragAndDropWrapper = (props: DragAndDropWrapperProps): JSX.Element => {
+  const {
+    item, children, useDragMode, useDropMode, type, onDropItem, isDropable,
+  } = props;
+
+
+  const acceptedTypes = type;
+  const sourcetype: string | symbol = type[0];
+
+
+  const [, dragRef] = useDrag({
+    type: sourcetype,
+    item,
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+      canDrag: monitor.canDrag(),
+    }),
+  });
+
+  const [{ isOver }, dropRef] = useDrop(() => ({
+    accept: acceptedTypes,
+    drop: (item: DragItemDataType, monitor) => {
+      const itemType: string | null | symbol = monitor.getItemType();
+      if (onDropItem != null) {
+        onDropItem(item, itemType);
+      }
+    },
+    canDrop: (item, monitor) => {
+      const itemType: string | null | symbol = monitor.getItemType();
+      if (isDropable != null) {
+        return isDropable(item, itemType);
+      }
+      return false;
+    },
+    collect: monitor => ({
+      isOver: monitor.isOver({ shallow: true }) && monitor.canDrop(),
+    }),
+  }));
+
+
+  const getRef = (c: HTMLDivElement | null) => {
+    if (useDragMode && useDropMode) {
+      return [dragRef(c), dropRef(c)];
+    } if (useDragMode) {
+      return dragRef(c);
+    } if (useDropMode) {
+      return dropRef(c);
+    }
+    return null;
+  };
+
+  return (
+    <div ref={c => getRef(c)} className={`grw-drag-drop-container ${isOver ? 'grw-accept-drop-item' : ''}` }>
+      {children}
+    </div>
+  );
+};

packages/app/src/interfaces/bookmark-info.ts

@@ -37,4 +37,15 @@ export const DRAG_ITEM_TYPE = {
   BOOKMARK: 'BOOKMARK',
 } as const;
 
+type BookmarkDragItem = {
+  bookmarkFolder: BookmarkFolderItems
+  level: number
+  root: string
+}
+
+export type DragItemDataType = BookmarkDragItem & {
+  parentFolder: BookmarkFolderItems | null
+} & IPageHasId
+
+
 export type DragItemType = typeof DRAG_ITEM_TYPE[keyof typeof DRAG_ITEM_TYPE];

packages/app/src/styles/molecules/_bookmark-folder-tree.scss

@@ -70,19 +70,21 @@ $grw-bookmark-item-padding-left: 45px;
   &:global{
     // To realize a hierarchical structure, set multiplied padding-left to each foldertree-item
     > .grw-foldertree-item-container {
-      > .list-group-item {
+      > .grw-drag-drop-container > .list-group-item {
         padding-left: 0;
-      } &.grw-root-bookmarks{
-        .list-group-item.bookmark-item-list {
-          padding-left: $grw-foldertree-item-padding-left + 25;
+      } &.grw-root-bookmarks {
+        .grw-drag-drop-container > .list-group-item.bookmark-item-list {
+          padding-left: $grw-foldertree-item-padding-left + 45;
         }
       }
-      > .list-group-item.bookmark-item-list {
-        padding-left: $grw-bookmark-item-padding-left;
+      .grw-drag-drop-container {
+        > .list-group-item.bookmark-item-list {
+          padding-left: $grw-bookmark-item-padding-left;
+        }
       }
       > .grw-foldertree-item-children {
         > .grw-foldertree-item-container {
-          > .list-group-item {
+          > .grw-drag-drop-container {
             padding-left: $grw-foldertree-item-padding-left;
           }
           > .list-group-item.bookmark-item-list {
@@ -90,7 +92,7 @@ $grw-bookmark-item-padding-left: 45px;
           }
           > .grw-foldertree-item-children {
             > .grw-foldertree-item-container {
-              > .list-group-item {
+              > .grw-drag-drop-container {
                 padding-left: $grw-foldertree-item-padding-left * 2;
               }
               > .list-group-item.bookmark-item-list {
@@ -98,7 +100,7 @@ $grw-bookmark-item-padding-left: 45px;
               }
               > .grw-foldertree-item-children {
                 > .grw-foldertree-item-container {
-                  > .list-group-item {
+                  > .grw-drag-drop-container {
                     padding-left: $grw-foldertree-item-padding-left * 3;
                   }
                   > .list-group-item.bookmark-item-list {
@@ -106,7 +108,7 @@ $grw-bookmark-item-padding-left: 45px;
                   }
                   > .grw-foldertree-item-children {
                     > .grw-foldertree-item-container {
-                      > .list-group-item {
+                      > .grw-drag-drop-container {
                         padding-left: $grw-foldertree-item-padding-left * 4;
                       }
                       > .list-group-item.bookmark-item-list {
@@ -114,7 +116,7 @@ $grw-bookmark-item-padding-left: 45px;
                       }
                       > .grw-foldertree-item-children {
                         > .grw-foldertree-item-container {
-                          > .list-group-item {
+                          > .grw-drag-drop-container {
                             padding-left: $grw-foldertree-item-padding-left * 5;
                           }
                           > .list-group-item.bookmark-item-list {
@@ -122,7 +124,7 @@ $grw-bookmark-item-padding-left: 45px;
                           }
                           > .grw-foldertree-item-children {
                             > .grw-foldertree-item-container {
-                              > .list-group-item {
+                              > .grw-drag-drop-container {
                                 padding-left: $grw-foldertree-item-padding-left * 6;
                               }
                               > .list-group-item.bookmark-item-list {
@@ -130,7 +132,7 @@ $grw-bookmark-item-padding-left: 45px;
                               }
                               > .grw-foldertree-item-children {
                                 > .grw-foldertree-item-container {
-                                  > .list-group-item {
+                                  > .grw-drag-drop-container {
                                     padding-left: $grw-foldertree-item-padding-left * 7;
                                   }
                                   > .list-group-item.bookmark-item-list {
@@ -138,7 +140,7 @@ $grw-bookmark-item-padding-left: 45px;
                                   }
                                   > .grw-foldertree-item-children {
                                     > .grw-foldertree-item-container {
-                                      > .list-group-item {
+                                      > .grw-drag-drop-container {
                                         padding-left: $grw-foldertree-item-padding-left * 8;
                                       }
                                       > .list-group-item.bookmark-item-list {
@@ -146,7 +148,7 @@ $grw-bookmark-item-padding-left: 45px;
                                       }
                                       > .grw-foldertree-item-children {
                                         > .grw-foldertree-item-container {
-                                          > .list-group-item {
+                                          > .grw-drag-drop-container {
                                             padding-left: $grw-foldertree-item-padding-left * 9;
                                           }
                                           > .list-group-item.bookmark-item-list {
@@ -154,7 +156,7 @@ $grw-bookmark-item-padding-left: 45px;
                                           }
                                           .grw-foldertree-item-children {
                                             > .grw-foldertree-item-container {
-                                              > .list-group-item {
+                                              > .grw-drag-drop-container {
                                                 padding-left: $grw-foldertree-item-padding-left * 10;
                                               }
                                               > .list-group-item.bookmark-item-list {