diff --git a/jest.config.js b/jest.config.js
index 117de1bcd1..d82629178b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,5 +21,5 @@ module.exports = {
       "<rootDir>/../../dist/libs/remix-ws-templates/src/index.js"
     ,
     "@remix-project/remixd": "<rootDir>/../../dist/libs/remixd/index.js"
-  },"projects": "<rootDir>/libs/remix-ui/draggable"
+  },"projects":"<rootDir>/libs/remix-ui/drag-n-drop"
 };
diff --git a/libs/remix-ui/drag-n-drop/.babelrc b/libs/remix-ui/drag-n-drop/.babelrc
new file mode 100644
index 0000000000..938d07c327
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/.babelrc
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel", {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+        
+      }
+    ]
+  ],
+  "plugins": [
+    
+    
+    
+  ]
+}
diff --git a/libs/remix-ui/draggable/.eslintrc.json b/libs/remix-ui/drag-n-drop/.eslintrc.json
similarity index 93%
rename from libs/remix-ui/draggable/.eslintrc.json
rename to libs/remix-ui/drag-n-drop/.eslintrc.json
index 7cd4bf646b..ac865be105 100644
--- a/libs/remix-ui/draggable/.eslintrc.json
+++ b/libs/remix-ui/drag-n-drop/.eslintrc.json
@@ -1,5 +1,6 @@
 {
   "extends": [
+    "plugin:@nrwl/nx/react",
     "../../../.eslintrc.json"
   ],
   "ignorePatterns": [
diff --git a/libs/remix-ui/drag-n-drop/README.md b/libs/remix-ui/drag-n-drop/README.md
new file mode 100644
index 0000000000..cbe7a6ff0e
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/README.md
@@ -0,0 +1,7 @@
+# remix-ui-drag-n-drop
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-drag-n-drop` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/drag-n-drop/jest.config.js b/libs/remix-ui/drag-n-drop/jest.config.js
new file mode 100644
index 0000000000..1a5729e026
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'remix-ui-drag-n-drop',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest'
+  },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/drag-n-drop'
+};
diff --git a/libs/remix-ui/drag-n-drop/package.json b/libs/remix-ui/drag-n-drop/package.json
new file mode 100644
index 0000000000..8813962570
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@remix-ui/drag-n-drop",
+  "version": "0.0.1"
+}
\ No newline at end of file
diff --git a/libs/remix-ui/drag-n-drop/src/index.ts b/libs/remix-ui/drag-n-drop/src/index.ts
new file mode 100644
index 0000000000..40aad7289f
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/src/index.ts
@@ -0,0 +1,2 @@
+
+export * from './lib/remix-ui-drag-n-drop';
diff --git a/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.module.css b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.spec.tsx b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.spec.tsx
new file mode 100644
index 0000000000..04dc71fa14
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import RemixUiDragNDrop from './remix-ui-drag-n-drop';
+
+describe('RemixUiDragNDrop', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(< RemixUiDragNDrop />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/libs/remix-ui/draggable/src/lib/remix-ui-draggable.tsx b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx
similarity index 97%
rename from libs/remix-ui/draggable/src/lib/remix-ui-draggable.tsx
rename to libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx
index 222eca1ddd..9e5d4a8152 100644
--- a/libs/remix-ui/draggable/src/lib/remix-ui-draggable.tsx
+++ b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx
@@ -51,7 +51,7 @@ export const Drag = (props: DragType) => {
 };
 
 export const Draggable = (props: DraggableType) => {
-  const dragRef = useRef<HTMLSpanElement>(),
+  const dragRef = useRef<HTMLSpanElement | null>(null),
     file = props.file,
     context = useContext(MoveContext);
 
diff --git a/libs/remix-ui/draggable/tsconfig.json b/libs/remix-ui/drag-n-drop/tsconfig.json
similarity index 57%
rename from libs/remix-ui/draggable/tsconfig.json
rename to libs/remix-ui/drag-n-drop/tsconfig.json
index 58b5a738e8..29741baf11 100644
--- a/libs/remix-ui/draggable/tsconfig.json
+++ b/libs/remix-ui/drag-n-drop/tsconfig.json
@@ -1,13 +1,17 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "files": [],
-  "include": [],
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
   },
+  "files": [],
+  "include": [],
   "references": [
     {
       "path": "./tsconfig.lib.json"
diff --git a/libs/remix-ui/drag-n-drop/tsconfig.lib.json b/libs/remix-ui/drag-n-drop/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/drag-n-drop/tsconfig.lib.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/remix-ui/draggable/tsconfig.spec.json b/libs/remix-ui/drag-n-drop/tsconfig.spec.json
similarity index 100%
rename from libs/remix-ui/draggable/tsconfig.spec.json
rename to libs/remix-ui/drag-n-drop/tsconfig.spec.json
diff --git a/libs/remix-ui/draggable/.babelrc b/libs/remix-ui/draggable/.babelrc
deleted file mode 100644
index cf7ddd99c6..0000000000
--- a/libs/remix-ui/draggable/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
-}
diff --git a/libs/remix-ui/draggable/README.md b/libs/remix-ui/draggable/README.md
deleted file mode 100644
index 5c429edbde..0000000000
--- a/libs/remix-ui/draggable/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# remix-ui-draggable
-
-This library was generated with [Nx](https://nx.dev).
-
-
-## Running unit tests
-
-Run `nx test remix-ui-draggable` to execute the unit tests via [Jest](https://jestjs.io).
-
-
diff --git a/libs/remix-ui/draggable/jest.config.js b/libs/remix-ui/draggable/jest.config.js
deleted file mode 100644
index 1798c08a91..0000000000
--- a/libs/remix-ui/draggable/jest.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-  displayName: 'remix-ui-draggable',
-  preset: '../../../jest.preset.js',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    }
-  },
-  transform: {
-    '^.+\\.[tj]sx?$':  'ts-jest' 
-  },
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../../coverage/libs/remix-ui/draggable'
-};
diff --git a/libs/remix-ui/draggable/src/index.ts b/libs/remix-ui/draggable/src/index.ts
deleted file mode 100644
index 9a4142a6fc..0000000000
--- a/libs/remix-ui/draggable/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/remix-ui-draggable';
diff --git a/libs/remix-ui/draggable/src/lib/remix-ui-draggable.spec.ts b/libs/remix-ui/draggable/src/lib/remix-ui-draggable.spec.ts
deleted file mode 100644
index 26a3488b47..0000000000
--- a/libs/remix-ui/draggable/src/lib/remix-ui-draggable.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { remixUiDraggable } from './remix-ui-draggable';
-
-describe('remixUiDraggable', () => {
-    it('should work', () => {
-        expect(remixUiDraggable()).toEqual('remix-ui-draggable');
-    })
-})
\ No newline at end of file
diff --git a/libs/remix-ui/draggable/tsconfig.lib.json b/libs/remix-ui/draggable/tsconfig.lib.json
deleted file mode 100644
index a2268f1709..0000000000
--- a/libs/remix-ui/draggable/tsconfig.lib.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "../../../dist/out-tsc",
-    "declaration": true,
-    "types": ["node"]
-  },
-  "exclude": ["**/*.spec.ts"],
-  "include": ["**/*.ts", "src/lib/remix-ui-draggable.tsx"]
-}
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 09e29bdd3e..40d81e1252 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -10,7 +10,7 @@ import '../css/file-explorer.css'
 import { checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath } from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { FileRender } from './file-render'
-import { Drag } from '@remix-project/remix-ui/draggable'
+import {Drag} from "@remix-ui/drag-n-drop"
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const { name, contextMenuItems, removedContextMenuItems, files, fileState } = props
diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx
index ef1e2329fa..8b601582eb 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx
@@ -7,7 +7,7 @@ import { getPathIcon } from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { FileLabel } from './file-label'
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
-
+import {Draggable} from "@remix-ui/drag-n-drop"
 
 
 
@@ -122,7 +122,9 @@ export const FileRender = (props: RenderFileProps) => {
         label={
           <>
             <div className="d-flex flex-row">
-              <FileLabel file={file} fileDecorations={props.fileDecorations} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+              <Draggable isDraggable={props.focusEdit.element!==null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
+                <FileLabel file={file} fileDecorations={props.fileDecorations} focusEdit={props.focusEdit} editModeOff={props.editModeOff} />
+              </Draggable>
               <FileDecorationIcons file={file} fileDecorations={props.fileDecorations}/>
             </div>
           </>
diff --git a/nx.json b/nx.json
index aeaf1074ad..db4114c205 100644
--- a/nx.json
+++ b/nx.json
@@ -204,14 +204,9 @@
     },
     "etherscan": {
       "tags": []
+    },
+    "remix-ui-drag-n-drop": {
+      "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index fa35b7d64a..0639979e32 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -153,7 +153,10 @@
         "libs/remix-ui/permission-handler/src/index.ts"
       ],
       "@remix-ui/file-decorators": ["libs/remix-ui/file-decorators/src/index.ts"],
-      "@remix-ui/tooltip-popup": ["libs/remix-ui/tooltip-popup/src/index.ts"]
+      "@remix-ui/tooltip-popup": ["libs/remix-ui/tooltip-popup/src/index.ts"],
+      "@remix-ui/drag-n-drop": [
+        "libs/remix-ui/drag-n-drop/src/index.ts"
+      ]
     }
   },
   "exclude": [
diff --git a/workspace.json b/workspace.json
index f14281de0d..8c0a1168db 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1516,6 +1516,26 @@
         }
       }
     },
+    "remix-ui-drag-n-drop": {
+      "root": "libs/remix-ui/drag-n-drop",
+      "sourceRoot": "libs/remix-ui/drag-n-drop/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "config": "libs/remix-ui/drag-n-drop/.eslintrc.json",
+            "tsConfig": [
+              "libs/remix-ui/drag-n-drop/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
     "vyper": {
       "root": "apps/vyper",
       "sourceRoot": "apps/vyper/src",