Disallow moving items to a collection it's already in via drag-n-drop (#20288)

* Disallow moving items to same collection via DND

* Fix typo

frontend/src/metabase/containers/dnd/CollectionDropTarget.jsx

 import { DropTarget } from "react-dnd";
-
+import { canonicalCollectionId } from "metabase/collections/utils";
 import DropArea from "./DropArea";
 import { MoveableDragTypes } from ".";
 
 const CollectionDropTarget = DropTarget(
   MoveableDragTypes,
   {
-    drop(props, monitor, component) {
+    drop(props) {
       return { collection: props.collection };
     },
     canDrop(props, monitor) {
+      const { collection } = props;
       const { item } = monitor.getItem();
-      // can't drop if can't write the  collection
-      if (props.collection.can_write === false) {
+      if (collection.can_write === false) {
         return false;
       }
-      return item.model !== "collection" || item.id !== props.collection.id;
+      const droppingToSameCollection =
+        canonicalCollectionId(item.collection_id) ===
+        canonicalCollectionId(collection.id);
+      return item.model !== "collection" && !droppingToSameCollection;
     },
   },
   (connect, monitor) => ({