diff --git a/packages/@react-aria/dnd/src/ListDropTargetDelegate.ts b/packages/@react-aria/dnd/src/ListDropTargetDelegate.ts
index 428b8ceaa83..54227fc6f3e 100644
--- a/packages/@react-aria/dnd/src/ListDropTargetDelegate.ts
+++ b/packages/@react-aria/dnd/src/ListDropTargetDelegate.ts
@@ -33,7 +33,7 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
   private ref: RefObject<HTMLElement | null>;
   private layout: 'stack' | 'grid';
   private orientation: Orientation;
-  private direction: Direction;
+  protected direction: Direction;
 
   constructor(collection: Iterable<Node<unknown>>, ref: RefObject<HTMLElement | null>, options?: ListDropTargetDelegateOptions) {
     this.collection = collection;
diff --git a/packages/@react-stately/dnd/src/useDraggableCollectionState.ts b/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
index c0ba9e798ae..5114fbe22a6 100644
--- a/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
+++ b/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
@@ -72,15 +72,35 @@ export function useDraggableCollectionState(props: DraggableCollectionStateOptio
   let draggedKey = useRef<Key | null>(null);
   let getKeys = (key: Key) => {
     // The clicked item is always added to the drag. If it is selected, then all of the
-    // other selected items are also dragged. If it is not selected, the only the clicked
+    // other selected items are also dragged. If it is not selected, then only the clicked
     // item is dragged. This matches native macOS behavior.
-    let keys = new Set(
-      selectionManager.isSelected(key)
-        ? new Set([...selectionManager.selectedKeys].filter(key => !!collection.getItem(key)))
-        : []
-    );
+    // Additionally, we filter out any keys that are children of any of the other selected keys
+    let keys = new Set<Key>();
+    if (selectionManager.isSelected(key)) {
+      for (let currentKey of selectionManager.selectedKeys) {
+        let node = collection.getItem(currentKey);
+        if (node) {
+          let isChild = false;
+          let parentKey = node.parentKey;
+          while (parentKey != null) {
+            // eslint-disable-next-line max-depth
+            if (selectionManager.selectedKeys.has(parentKey)) {
+              isChild = true;
+              break;
+            }
+            let parentNode = collection.getItem(parentKey);
+            parentKey = parentNode ? parentNode.parentKey : null;
+          }
+
+          if (!isChild) {
+            keys.add(currentKey);
+          }
+        }
+      }
+    } else {
+      keys.add(key);
+    }
 
-    keys.add(key);
     return keys;
   };
 
diff --git a/packages/@react-stately/dnd/src/useDroppableCollectionState.ts b/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
index 3e8c5b58e23..01036c91688 100644
--- a/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
+++ b/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
@@ -72,14 +72,14 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
 
   let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget | null => {
     if (target.dropPosition === 'before') {
-      let key = collection.getKeyBefore(target.key);
-      return key != null && collection.getItem(key)?.level === collection.getItem(target.key)?.level 
-        ? {type: 'item', key, dropPosition: 'after'} 
+      let node = collection.getItem(target.key);
+      return node && node.prevKey != null
+        ? {type: 'item', key: node.prevKey, dropPosition: 'after'} 
         : null;
     } else if (target.dropPosition === 'after') {
-      let key = collection.getKeyAfter(target.key);
-      return key != null && collection.getItem(key)?.level === collection.getItem(target.key)?.level
-        ? {type: 'item', key, dropPosition: 'before'} 
+      let node = collection.getItem(target.key);
+      return node && node.nextKey != null
+        ? {type: 'item', key: node.nextKey, dropPosition: 'before'} 
         : null;
     }
     return null;
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index c93d508afc0..1eb52d17db7 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -11,6 +11,7 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:react-aria-components';
+import sharedDocs from 'docs:@react-types/shared';
 import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, ClassAPI, VersionBadge} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import packageData from 'react-aria-components/package.json';
@@ -22,6 +23,7 @@ import {ExampleList} from '@react-spectrum/docs/src/ExampleList';
 import {Keyboard} from '@react-spectrum/text';
 import Collections from '@react-spectrum/docs/pages/assets/component-illustrations/Collections.svg';
 import Selection from '@react-spectrum/docs/pages/assets/component-illustrations/Selection.svg';
+import DragAndDrop from '@react-spectrum/docs/pages/assets/component-illustrations/DragAndDrop.svg';
 import Checkbox from '@react-spectrum/docs/pages/assets/component-illustrations/Checkbox.svg';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Button.svg';
 import treeUtils from 'docs:@react-aria/test-utils/src/tree.ts';
@@ -134,7 +136,7 @@ import {
     gap: 0.571rem;
     min-height: 28px;
     padding: 0.286rem 0.286rem 0.286rem 0.571rem;
-    --padding: 8px;
+    --padding: 16px;
     border-radius: 6px;
     outline: none;
     cursor: default;
@@ -259,6 +261,7 @@ HTML lists are meant for static content, rather than hierarchies with rich inter
 * **Interactive children** – Tree items may include interactive elements such as buttons, menus, etc.
 * **Actions** – Items support optional actions such as navigation via click, tap, double click, or <Keyboard>Enter</Keyboard> key.
 * **Keyboard navigation** – Tree items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
+* **Drag and drop** – Tree supports drag and drop to reorder, move, insert, or update items via mouse, touch, keyboard, and screen reader interactions.
 * **Virtualized scrolling** – Use [Virtualizer](Virtualizer.html) to improve performance of large lists by rendering only the visible items.
 * **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
 * **Accessible** – Follows the [ARIA treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](accessibility.html#testing) to ensure announcements and behaviors are consistent.
@@ -279,6 +282,7 @@ import {Tree, TreeItem, TreeItemContent, Button, Checkbox} from 'react-aria-comp
     <TreeItemContent>
       <Button slot="chevron" />
       <Checkbox slot="selection" />
+      <Button slot="drag" />
     </TreeItemContent>
     <TreeItem>
       {/* ... */}
@@ -307,6 +311,13 @@ import {Tree, TreeItem, TreeItemContent, Button, Checkbox} from 'react-aria-comp
   <Selection />
 </ExampleCard>
 
+<ExampleCard
+  url="dnd.html"
+  title="Drag and drop"
+  description="Concepts and interactions for an accessible drag and drop experience.">
+  <DragAndDrop />
+</ExampleCard>
+
 </section>
 
 ### Composed components
@@ -353,8 +364,9 @@ import {Button} from 'react-aria-components';
 function MyTreeItemContent(props: Omit<TreeItemContentProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <TreeItemContent>
-      {({hasChildItems, selectionBehavior, selectionMode}: TreeItemContentRenderProps) => (
+      {({hasChildItems, selectionBehavior, selectionMode, allowsDragging}: TreeItemContentRenderProps) => (
         <>
+          {allowsDragging && <Button slot="drag">≡</Button>}
           {selectionBehavior === 'toggle' && selectionMode !== 'none' && <MyCheckbox slot="selection" />}
           <Button slot="chevron">
             <svg viewBox="0 0 24 24">
@@ -417,20 +429,22 @@ import type {TreeProps} from 'react-aria-components';
 import {MyCheckbox} from './Checkbox';
 
 let items = [
-  {id: 1, title: 'Documents', children: [
-    {id: 2, title: 'Project', children: [
-      {id: 3, title: 'Weekly Report', children: []}
+  {id: '1', title: 'Documents', type: 'directory', children: [
+    {id: '2', title: 'Project', type: 'directory', children: [
+      {id: '3', title: 'Weekly Report', type: 'file', children: []},
+      {id: '4', title: 'Budget', type: 'file', children: []}
     ]}
   ]},
-  {id: 4, title: 'Photos', children: [
-    {id: 5, title: 'Image 1', children: []},
-    {id: 6, title: 'Image 2', children: []}
+  {id: '5', title: 'Photos', type: 'directory', children: [
+    {id: '6', title: 'Image 1', type: 'file', children: []},
+    {id: '7', title: 'Image 2', type: 'file', children: []}
   ]}
 ];
 
 interface FileType {
-  id: number,
+  id: string,
   title: string,
+  type: 'directory' | 'file',
   children: FileType[]
 }
 
@@ -753,6 +767,1061 @@ Use the `renderEmptyState` prop to customize what the `Tree` will display if the
 
 </details>
 
+## Drag and drop
+
+Tree supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the <TypeLink links={docs.links} type={docs.exports.useDragAndDrop} /> hook. Users can drop data on the tree as a whole, on individual items, insert new items between existing ones, or move items within the tree hierarchy.
+
+React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets. A droppable collection is treated as a single drop target, so that users can easily tab past it to get to the next drop target. Within a droppable tree, keys such as <Keyboard>ArrowDown</Keyboard> and <Keyboard>ArrowUp</Keyboard> can be used to select a _drop position_, such as on an item, or between items.
+
+Items with children can be expanded or collapsed during keyboard drag and drop mode by using the <Keyboard>ArrowRight</Keyboard> and <Keyboard>ArrowLeft</Keyboard> keys, or the <Keyboard>Option</Keyboard> (<Keyboard>Alt</Keyboard> on Windows) + <Keyboard>Enter</Keyboard> keys. Screen reader users can expand and collapse items with children by navigating to and activating a visually hidden button that gets announced.
+
+Draggable tree items must include a focusable drag handle using a `<Button slot="drag">`. This enables keyboard and screen reader users to initiate drag and drop. The `MyTreeItemContent` component defined in the [reusable wrappers](#reusable-wrappers) section above can be extended to include this automatically when the tree allows dragging.
+
+See the [drag and drop introduction](dnd.html) to learn more.
+
+### Moving between levels
+
+The `onMove` event handler allows reordering items within a level, as well as moving items to a different level. It supports dropping both on and between items. The `getItems` function must also be implemented for items to become draggable. [See below](#drag-data) for more details.
+
+This uses [useTreeData](../react-stately/useTreeData.html) from React Stately to manage the tree data. Note that `useTreeData` is a convenience hook, not a requirement. You can manage your state however you wish.
+
+```tsx example
+function Example() {
+  let tree = useTreeData({
+    initialItems: items
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map(key => ({
+      'text/plain': tree.getItem(key).value.title
+    })),
+    ///- begin highlight -///
+    onMove(e) {
+      if (e.target.dropPosition === 'before') {
+        tree.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        tree.moveAfter(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'on') {
+        // Move items to become children of the target
+        let targetNode = tree.getItem(e.target.key);
+        if (targetNode) {
+          let targetIndex = targetNode.children ? targetNode.children.length : 0;
+          let keyArray = Array.from(e.keys);
+          for (let i = 0; i < keyArray.length; i++) {
+            tree.move(keyArray[i], e.target.key, targetIndex + i);
+          }
+        }
+      }
+    }
+    ///- end highlight -///
+  });
+
+  return (
+    <Tree
+      aria-label="Tree with hierarchical drag and drop"
+      selectionMode="multiple"
+      items={tree.items}
+      dragAndDropHooks={dragAndDropHooks}
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={item.value.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+```
+
+### Reordering within a level
+
+The `onReorder` event handler allows reordering items within the same level. Unlike `onMove` it does not allow moving items to a different level.
+
+```tsx example
+import {useTreeData} from '@react-stately/data';
+import {useDragAndDrop, Button} from 'react-aria-components';
+
+function Example() {
+  let tree = useTreeData({
+    initialItems: items
+  });
+
+  ///- begin highlight -///
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map(key => ({
+      'text/plain': tree.getItem(key).value.title
+    })),
+    onReorder(e) {
+      if (e.target.dropPosition === 'before') {
+        tree.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        tree.moveAfter(e.target.key, e.keys);
+      }
+    }
+  });
+  ///- end highlight -///
+
+  return (
+    <Tree
+      aria-label="Reorderable tree"
+      selectionMode="multiple"
+      items={tree.items}
+      ///- begin highlight -///
+      dragAndDropHooks={dragAndDropHooks}
+      ///- end highlight -///
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={item.value.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+```
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+
+```css
+.react-aria-TreeItem {
+  &[data-allows-dragging] {
+    padding-left: 4px;
+  }
+
+  &[data-dragging] {
+    opacity: 0.6;
+  }
+
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    background: var(--highlight-overlay);
+  }
+
+  [slot=drag] {
+    all: unset;
+    width: 15px;
+    text-align: center;
+
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
+    }
+  }
+}
+
+.react-aria-Tree {
+  &[data-selection-mode=multiple] {
+    --checkbox-width: 28px;
+  }
+
+  &[data-allows-dragging] {
+    --drag-button-width: 23px;
+  }
+
+  .react-aria-DropIndicator {
+    &[data-drop-target] {
+      outline: 1px solid var(--highlight-background);
+      margin-left: calc(8px + var(--checkbox-width, 0px) + var(--drag-button-width, 0px) + 26px + (var(--tree-item-level) - 1) * 16px);
+    }
+  }
+}
+```
+
+</details>
+
+### Custom drag preview
+
+By default, the drag preview shown under the user's pointer or finger is a copy of the original element that started the drag. A custom preview can be rendered by implementing the `renderDragPreview` function, passed to `useDragAndDrop`. This receives the dragged data that was returned by `getItems`, and returns a rendered preview for those items.
+
+This example renders a custom drag preview which shows the number of items being dragged.
+
+```tsx example
+function Example() {
+  let tree = useTreeData({
+    initialItems: items
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map(key => ({
+      'text/plain': tree.getItem(key).value.title
+    })),
+    ///- begin highlight -///
+    renderDragPreview(items) {
+      return (
+        <div className="drag-preview">
+          {items[0]['text/plain']}
+          <span className="badge">{items.length}</span>
+        </div>
+      );
+    }
+    ///- end highlight -///
+  });
+
+  return (
+    <Tree
+      aria-label="Tree with custom drag preview"
+      selectionMode="multiple"
+      items={tree.items}
+      dragAndDropHooks={dragAndDropHooks}
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={item.value.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+```
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+
+```css
+.drag-preview {
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
+  border-radius: 4px;
+
+  .badge {
+    background: var(--highlight-foreground);
+    color: var(--highlight-background);
+    padding: 0 8px;
+    border-radius: 4px;
+  }
+}
+```
+
+</details>
+
+### Drag data
+
+Data for draggable items can be provided in multiple formats at once. This allows drop targets to choose data in a format that they understand. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user drops data in an external application (e.g. an email message).
+
+This can be done by returning multiple keys for an item from the `getItems` function. Types can either be a standard [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) for interoperability with external applications, or a custom string for use within your own app.
+
+This example provides representations of each item as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.
+
+```tsx example export=true
+function DraggableTree() {
+  let tree = useTreeData({
+    initialItems: items
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    ///- begin highlight -///
+    getItems(keys) {
+      return [...keys].map(key => {
+        let item = tree.getItem(key).value;
+        return {
+          'text/plain': `${item.title}`,
+          'text/html': `<strong>${item.title}</strong>`,
+          'custom-app-type': JSON.stringify(item)
+        };
+      });
+    },
+    ///- end highlight -///
+    renderDragPreview(items) {
+      return (
+        <div className="drag-preview">
+          {items[0]['text/plain']}
+          <span className="badge">{items.length}</span>
+        </div>
+      );
+    }
+  });
+
+  return (
+    <Tree
+      aria-label="Draggable tree"
+      selectionMode="multiple"
+      items={tree.items}
+      dragAndDropHooks={dragAndDropHooks}
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={item.value.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+  <DraggableTree />
+  {/* see below */}
+  <DroppableTree />
+</div>
+```
+
+### Dropping on the collection
+
+Dropping on the Tree as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the Tree, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
+
+```tsx example
+import {isTextDropItem} from 'react-aria-components';
+
+interface DroppableItem {
+  id: string | number;
+  title: string;
+  children?: DroppableItem[];
+}
+
+function Example() {
+  let [items, setItems] = React.useState<any[]>([]);
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    /*- begin highlight -*/
+    async onRootDrop(e) {
+      let items = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
+      );
+      setItems(items);
+    }
+    /*- end highlight -*/
+  });
+
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <DraggableTree />
+      <Tree
+        aria-label="Drop target tree"
+        items={items}
+        dragAndDropHooks={dragAndDropHooks}
+        renderEmptyState={() => 'Drop items here'}
+      >
+        {function renderItem(item: DroppableItem) {
+          return (
+            <MyTreeItem title={item.title}>
+              <Collection items={item.children}>
+                {renderItem}
+              </Collection>
+            </MyTreeItem>
+          )
+        }}
+      </Tree>
+    </div>
+  );
+}
+```
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+
+```css
+.react-aria-Tree[data-drop-target] {
+  outline: 2px solid var(--highlight-background);
+  outline-offset: -1px;
+  background: var(--highlight-overlay);
+}
+```
+
+</details>
+
+### Dropping on items
+
+Dropping on items can be enabled using the `onItemDrop` event. When a valid drag hovers over an item, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
+
+```tsx example export=true
+const droppableItems = [
+  {id: '8', title: 'Videos', type: 'directory', children: [
+    {id: '9', title: 'Movie.mp4', type: 'file'}
+  ]},
+  // ...
+  ///- begin collapse -///
+  {id: '10', title: 'Music', type: 'directory', children: [
+    {id: '11', title: 'Song.mp3', type: 'file'},
+    {id: '12', title: 'Album', type: 'directory', children: [
+      {id: '13', title: 'Track1.mp3', type: 'file'}
+    ]}
+  ]}
+  ///- end collapse -///
+];
+
+function DroppableTreeExample() {
+  let tree = useTreeData({
+    initialItems: droppableItems
+  });
+
+  let serializeItem = (nodeItem) => ({
+    ...nodeItem,
+    children: nodeItem.children.map(serializeItem),
+    // Assign a unique ID to avoid duplicates when the same item is dropped multiple times.
+    id: Math.random().toString(36).slice(2)
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    ///- begin highlight -///
+    async onItemDrop(e) {
+      let items = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => {
+            let parsed = JSON.parse(await item.getText('custom-app-type'));
+            return serializeItem(parsed);
+          })
+      );
+
+      tree.insert(e.target.key, 0, ...items);
+    }
+    ///- end highlight -///
+  });
+
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <DraggableTree />
+      <Tree
+        aria-label="Tree with item drop targets"
+        items={tree.items}
+        dragAndDropHooks={dragAndDropHooks}>
+        {function renderItem(item) {
+          return (
+            <MyTreeItem title={item.value.title}>
+              <Collection items={item.children}>
+                {renderItem}
+              </Collection>
+            </MyTreeItem>
+          )
+        }}
+      </Tree>
+    </div>
+  );
+}
+```
+
+### Dropping between items
+
+Dropping between items can be enabled using the `onInsert` event. Tree renders a <TypeLink links={docs.links} type={docs.exports.DropIndicator} /> between items to indicate the insertion position, which can be styled using the `.react-aria-DropIndicator` selector. When it is active, it receives the `[data-drop-target]` state.
+
+```tsx example
+import {isTextDropItem} from 'react-aria-components';
+
+function Example() {
+  let tree = useTreeData({
+    initialItems: droppableItems
+  });
+
+  let serializeItem = (nodeItem) => ({
+    ...nodeItem,
+    children: nodeItem.children.map(serializeItem),
+    // Assign a unique ID to avoid duplicates when the same item is dropped multiple times.
+    id: Math.random().toString(36).slice(2)
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    ///- begin highlight -///
+    async onInsert(e) {
+      let items = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => {
+            let parsed = JSON.parse(await item.getText('custom-app-type'));
+            return serializeItem(parsed);
+          })
+      );
+
+      if (e.target.dropPosition === 'before') {
+        tree.insertBefore(e.target.key, ...items);
+      } else if (e.target.dropPosition === 'after') {
+        tree.insertAfter(e.target.key, ...items);
+      }
+    }
+    ///- end highlight -///
+  });
+
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <DraggableTree />
+      <Tree
+        aria-label="Tree with insertion"
+        items={tree.items}
+        dragAndDropHooks={dragAndDropHooks}>
+        {function renderItem(item) {
+          return (
+            <MyTreeItem title={item.value.title}>
+              <Collection items={item.children}>
+                {renderItem}
+              </Collection>
+            </MyTreeItem>
+          )
+        }}
+      </Tree>
+    </div>
+  );
+}
+```
+
+### Drop data
+
+`Tree` allows users to drop one or more **drag items**, each of which contains data to be transferred from the drag source to drop target. There are three kinds of drag items:
+
+* `text` – represents data inline as a string in one or more formats
+* `file` – references a file on the user's device
+* `directory` – references the contents of a directory
+
+#### Text
+
+A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.TextDropItem.id]} /> represents textual data in one or more different formats. These may be either standard [mime types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) or custom app-specific formats. Representing data in multiple formats allows drop targets both within and outside an application to choose data in a format that they understand. For example, a complex object may be serialized in a custom format for use within an application, with fallbacks in plain text and/or rich HTML that can be used when a user drops data from an external application.
+
+The example below uses the `acceptedDragTypes` prop to accept items that include a custom app-specific type, which is retrieved using the item's `getText` method. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead. When `acceptedDragTypes` is specified, the dropped items are filtered to include only items that include the accepted types.
+
+```tsx example export=true
+import {isTextDropItem} from 'react-aria-components';
+
+interface DroppableItem {
+  id: string | number;
+  title: string;
+  children?: DroppableItem[];
+}
+
+function DroppableTree() {
+  let [items, setItems] = React.useState<any[]>([]);
+
+  let serializeItem = (nodeItem) => ({
+    ...nodeItem,
+    children: nodeItem.children.map(serializeItem),
+    // Assign a unique ID to avoid duplicates when the same item is dropped multiple times.
+    id: Math.random().toString(36).slice(2)
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    /*- begin highlight -*/
+    acceptedDragTypes: ['custom-app-type'],
+    async onRootDrop(e) {
+      let items = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => {
+            let parsed = JSON.parse(await item.getText('custom-app-type'));
+            return serializeItem(parsed);
+          })
+      );
+      setItems(items);
+    }
+    /*- end highlight -*/
+  });
+
+  return (
+    <Tree
+      aria-label="Droppable tree"
+      items={items}
+      dragAndDropHooks={dragAndDropHooks}
+      renderEmptyState={() => 'Drop items here'}
+    >
+      {function renderItem(item: DroppableItem) {
+        return (
+          <MyTreeItem title={item.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+  <DraggableTree />
+  <DroppableTree />
+</div>
+```
+
+#### Files
+
+A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.FileDropItem.id]} /> references a file on the user's device. It includes the name and mime type of the file, and methods to read the contents as plain text, or retrieve a native [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object which can be attached to form data for uploading.
+
+This example accepts JPEG and PNG image files, and renders them in a tree structure by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). When the tree is empty, you can drop on the whole collection, and otherwise items can be inserted.
+
+```tsx example
+import {isFileDropItem} from 'react-aria-components';
+
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string,
+  type: string,
+  lastModified: number
+}
+
+function Example() {
+  let [items, setItems] = React.useState<ImageItem[]>([]);
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    /*- begin highlight -*/
+    acceptedDragTypes: ['image/jpeg', 'image/png'],
+    async onRootDrop(e) {
+      let items = await Promise.all(
+        e.items.filter(isFileDropItem).map(async item => {
+          let file = await item.getFile();
+          return {
+            id: Math.random(),
+            url: URL.createObjectURL(file),
+            name: item.name,
+            type: file.type,
+            lastModified: file.lastModified
+          };
+        })
+      );
+      setItems(items);
+    }
+    /*- end highlight -*/
+  });
+
+  return (
+    <Tree
+      aria-label="Droppable tree"
+      items={items}
+      dragAndDropHooks={dragAndDropHooks}
+      renderEmptyState={() => 'Drop images here'}
+    >
+      {(item) => (
+        <TreeItem textValue={item.name}>
+          <TreeItemContent>
+            <img src={item.url} style={{width: 20, height: 20, marginRight: 8}} />
+            {item.name}
+          </TreeItemContent>
+        </TreeItem>
+      )}
+    </Tree>
+  );
+}
+```
+
+#### Directories
+
+A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DirectoryDropItem.id]} /> references the contents of a directory on the user's device. It includes the name of the directory, as well as a method to iterate through the files and folders within the directory. The contents of any folders within the directory can be accessed recursively.
+
+The `getEntries` method returns an [async iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) object, which can be used in a `for await...of` loop. This provides each item in the directory as either a <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.FileDropItem.id]} /> or <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DirectoryDropItem.id]} />, and you can access the contents of each file as discussed above.
+
+This example accepts directory drops over the whole collection, and renders the contents as items in the tree. `DIRECTORY_DRAG_TYPE` is imported from `react-aria-components` and included in the `acceptedDragTypes` prop to limit the accepted items to only directories.
+
+```tsx example
+import {DIRECTORY_DRAG_TYPE, isDirectoryDropItem} from 'react-aria-components';
+
+interface DirItem {
+  name: string,
+  kind: string,
+  type: string,
+  children?: DirItem[]
+}
+
+function Example() {
+  let [files, setFiles] = React.useState<DirItem[]>([]);
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    /*- begin highlight -*/
+    acceptedDragTypes: [DIRECTORY_DRAG_TYPE],
+    async onRootDrop(e) {
+      // Read entries in directory and update state with relevant info.
+      let getFiles = async (dir) => {
+        let files = [];
+        for await (let entry of dir.getEntries()) {
+          files.push({
+            id: Math.random().toString(36).slice(2),
+            name: entry.name,
+            kind: entry.kind,
+            children: entry.kind === 'directory' 
+              ? await getFiles(entry) 
+              : []
+          });
+        }
+        return files;
+      };
+
+      let dir = e.items.find(isDirectoryDropItem)!;
+      setFiles(await getFiles(dir));
+    }
+    /*- end highlight -*/
+  });
+
+  return (
+    <Tree
+      aria-label="Droppable tree"
+      items={files}
+      dragAndDropHooks={dragAndDropHooks}
+      renderEmptyState={() => 'Drop directory here'}
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={`${item.kind === 'directory' ? '📁' : '📄'} ${item.name}`}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+```
+
+### Drop operations
+
+A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.DropOperation.id]} /> is an indication of what will happen when dragged data is dropped on a particular drop target. These are:
+
+* `move` – indicates that the dragged data will be moved from its source location to the target location.
+* `copy` – indicates that the dragged data will be copied to the target destination.
+* `link` – indicates that there will be a relationship established between the source and target locations.
+* `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
+
+Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> to switch from move to copy.
+
+#### onDragEnd
+
+The `onDragEnd` event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The `dropOperation` property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged items.
+
+This example removes the dragged items from the UI when a move operation is completed. Try holding the <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> keys to change the operation to copy, and see how the behavior changes.
+
+```tsx example
+function Example() {
+  let tree = useTreeData({
+    initialItems: items
+  });
+
+  let { dragAndDropHooks } = useDragAndDrop({
+    ///- begin collapse -///
+    renderDragPreview(items) {
+      return (
+        <div className="drag-preview">
+          {items[0]['text/plain']}
+          <span className="badge">{items.length}</span>
+        </div>
+      );
+    },
+    getItems(keys) {
+      return [...keys].map(key => {
+        let item = tree.getItem(key).value;
+        return {
+          'text/plain': item.title,
+          'custom-app-type': JSON.stringify(item)
+        };
+      });
+    },
+    ///- end collapse -///
+    // ...
+    /*- begin highlight -*/
+    onDragEnd(e) {
+      if (e.dropOperation === 'move') {
+        tree.remove(...e.keys);
+      }
+    }
+    /*- end highlight -*/
+  });
+
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <Tree aria-label="Draggable tree" selectionMode="multiple" items={tree.items} dragAndDropHooks={dragAndDropHooks}>
+        {function renderItem(item) {
+          return (
+            <MyTreeItem title={item.value.title}>
+              <Collection items={item.children}>
+                {renderItem}
+              </Collection>
+            </MyTreeItem>
+          )
+        }}
+      </Tree>
+      <DroppableTree />
+    </div>
+  );
+}
+```
+
+#### getAllowedDropOperations
+
+The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the `getAllowedDropOperations` function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.
+
+```tsx example
+function Example() {
+  ///- begin collapse -///
+  let tree = useTreeData({
+    initialItems: items
+  });
+  ///- end collapse -///
+  // ...
+
+  let { dragAndDropHooks } = useDragAndDrop({
+    ///- begin collapse -///
+    renderDragPreview(items) {
+      return (
+        <div className="drag-preview">
+          {items[0]['text/plain']}
+          <span className="badge">{items.length}</span>
+        </div>
+      );
+    },
+    getItems(keys) {
+      return [...keys].map(key => {
+        let item = tree.getItem(key).value;
+        return {
+          'text/plain': item.title,
+          'custom-app-type': JSON.stringify(item)
+        };
+      });
+    },
+    ///- end collapse -///
+    // ...
+    /*- begin highlight -*/
+    getAllowedDropOperations: () => ['copy']
+    /*- end highlight -*/
+  });
+
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <Tree aria-label="Draggable tree" selectionMode="multiple" items={tree.items} dragAndDropHooks={dragAndDropHooks}>
+        {function renderItem(item) {
+          return (
+            <MyTreeItem title={item.value.title}>
+              <Collection items={item.children}>
+                {renderItem}
+              </Collection>
+            </MyTreeItem>
+          )
+        }}
+      </Tree>
+      <DroppableTree />
+    </div>
+  );
+}
+```
+
+#### getDropOperation
+
+The `getDropOperation` function passed to `useDragAndDrop` can be used to provide appropriate feedback to the user when a drag hovers over the drop target. This function receives the drop target, set of types contained in the drag, and a list of allowed drop operations as specified by the drag source. It should return one of the drop operations in `allowedOperations`, or a specific drop operation if only that drop operation is supported. It may also return `'cancel'` to reject the drop. If the returned operation is not in `allowedOperations`, then the drop target will act as if `'cancel'` was returned.
+
+In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as <Keyboard>Control</Keyboard> while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
+
+```tsx example
+///- begin collapse -///
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string
+}
+///- end collapse -///
+function Example() {
+  let [items, setItems] = React.useState<ImageItem[]>([]);
+
+  let { dragAndDropHooks } = useDragAndDrop({
+    /*- begin highlight -*/
+    getDropOperation: () => 'copy',
+    /*- end highlight -*/
+    acceptedDragTypes: ['image/png'],
+    async onRootDrop(e) {
+      ///- begin collapse -///
+      let items = await Promise.all(
+        e.items.filter(isFileDropItem).map(async item => ({
+          id: Math.random(),
+          url: URL.createObjectURL(await item.getFile()),
+          name: item.name
+        }))
+      );
+      setItems(items);
+      ///- end collapse -///
+      // ...
+    }
+  });
+
+  ///- begin collapse -///
+  return (
+    <Tree aria-label="Droppable tree" items={items} dragAndDropHooks={dragAndDropHooks} renderEmptyState={() => "Drop PNGs here"}>
+      {item => (
+        <TreeItem textValue={item.name}>
+          <TreeItemContent>
+            <div className="image-item">
+              <img src={item.url} />
+              <span>{item.name}</span>
+            </div>
+          </TreeItemContent>
+        </TreeItem>
+      )}
+    </Tree>
+  );
+  ///- end collapse -///
+  // See "Files" example above...
+}
+```
+
+#### Drop events
+
+Drop events such as `onInsert`, `onItemDrop`, etc. also include the `dropOperation`. This can be used to perform different actions accordingly, for example, when communicating with a backend API.
+
+```tsx
+let onItemDrop = async (e) => {
+  let data = JSON.parse(await e.items[0].getText('my-app-file'));
+  /*- begin highlight -*/
+  switch (e.dropOperation) {
+    case 'move':
+      MyAppFileService.move(data.filePath, props.filePath);
+      break;
+    case 'copy':
+      MyAppFileService.copy(data.filePath, props.filePath);
+      break;
+    case 'link':
+      MyAppFileService.link(data.filePath, props.filePath);
+      break;
+  }
+  /*- end highlight -*/
+};
+```
+
+### Drag between trees
+
+This example puts together many of the concepts described above, allowing users to drag items between trees bidirectionally. It also supports moving items within the same tree hierarchy. When a tree is empty, it accepts drops on the whole collection. `getDropOperation` ensures that items are always moved rather than copied, which avoids duplicate items.
+
+```tsx example
+import {isTextDropItem} from 'react-aria-components';
+
+interface FileItem {
+  id: string,
+  title: string,
+  type: string,
+  children?: FileItem[]
+}
+
+interface DndTreeProps {
+  initialItems: FileItem[],
+  'aria-label': string
+}
+
+function DndTree(props: DndTreeProps) {
+  let tree = useTreeData({
+    initialItems: props.initialItems,
+    getKey: item => item.id,
+    getChildren: item => item.children || []
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    // Provide drag data in a custom format as well as plain text.
+    getItems(keys) {
+      return [...keys].map((key) => {
+        let item = tree.getItem(key);
+        let serializeItem = (nodeItem) => ({
+          ...nodeItem.value,
+          children: nodeItem.children ? [...nodeItem.children].map(serializeItem) : []
+        });
+
+        return {
+          'custom-app-type': JSON.stringify(serializeItem(item)),
+          'text/plain': item.value.title
+        };
+      });
+    },
+
+    // Accept drops with the custom format.
+    acceptedDragTypes: ['custom-app-type'],
+
+    // Ensure items are always moved rather than copied.
+    getDropOperation: () => 'move',
+
+    // Handle drops between items from other trees.
+    async onInsert(e) {
+      let processedItems = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
+      );
+      if (e.target.dropPosition === 'before') {
+        tree.insertBefore(e.target.key, ...processedItems);
+      } else if (e.target.dropPosition === 'after') {
+        tree.insertAfter(e.target.key, ...processedItems);
+      }
+    },
+
+    // Handle drops on the collection when empty.
+    async onRootDrop(e) {
+      let processedItems = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
+      );
+      tree.insert(null, 0, ...processedItems);
+    },
+
+    // Handle moving items within the same tree or to different levels.
+    onMove(e) {
+      if (e.target.dropPosition === 'before') {
+        tree.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        tree.moveAfter(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'on') {
+        let targetNode = tree.getItem(e.target.key);
+        if (targetNode) {
+          let targetIndex = targetNode.children ? targetNode.children.length : 0;
+          let keyArray = Array.from(e.keys);
+          for (let i = 0; i < keyArray.length; i++) {
+            tree.move(keyArray[i], e.target.key, targetIndex + i);
+          }
+        }
+      }
+    },
+
+    // Remove the items from the source tree on drop
+    // if they were moved to a different tree.
+    onDragEnd(e) {
+      if (e.dropOperation === 'move' && !e.isInternal) {
+        tree.remove(...e.keys);
+      }
+    }
+  });
+
+  return (
+    <Tree
+      aria-label={props['aria-label']}
+      selectionMode="multiple"
+      items={tree.items}
+      dragAndDropHooks={dragAndDropHooks}
+      renderEmptyState={() => 'Drop items here'}
+    >
+      {function renderItem(item) {
+        return (
+          <MyTreeItem title={item.value.title}>
+            <Collection items={item.children}>
+              {renderItem}
+            </Collection>
+          </MyTreeItem>
+        )
+      }}
+    </Tree>
+  );
+}
+
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+  <DndTree
+    initialItems={items}
+    aria-label="First Tree"
+  />
+  <DndTree
+    initialItems={droppableItems}
+    aria-label="Second Tree"
+  />
+</div>
+```
 
 ## Props
 
diff --git a/packages/react-aria-components/example/index.css b/packages/react-aria-components/example/index.css
index d2c97174ef5..11e2637ad97 100644
--- a/packages/react-aria-components/example/index.css
+++ b/packages/react-aria-components/example/index.css
@@ -13,7 +13,11 @@ html {
   overflow: auto;
 
   :global(.react-aria-DropIndicator) {
-    margin-left: calc(var(--tree-item-level) * 15px);
+    margin-inline-start: calc(var(--tree-item-level) * 15px);
+  }
+
+  :global(.react-aria-DropIndicator[data-drop-target]) {
+    outline: 1px solid slateblue;
   }
 
   &[data-drop-target] {
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 60e1da30ea5..d0e55c8507d 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -16,12 +16,13 @@ import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, HoverEvents, Key, KeyboardDelegate, LinkDOMProps, MultipleSelection, RefObject} from '@react-types/shared';
+import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, HoverEvents, Key, KeyboardDelegate, LinkDOMProps, MultipleSelection, RefObject, SelectionMode} from '@react-types/shared';
 import {DragAndDropContext, DropIndicatorContext, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {TreeDropTargetDelegate} from './TreeDropTargetDelegate';
 import {useControlledState} from '@react-stately/utils';
 
 class TreeCollection<T> implements ICollection<Node<T>> {
@@ -113,6 +114,16 @@ export interface TreeRenderProps {
    * @selector [data-focus-visible]
    */
   isFocusVisible: boolean,
+  /**
+   * The type of selection that is allowed in the collection.
+   * @selector [data-selection-mode="single | multiple"]
+   */
+  selectionMode: SelectionMode,
+  /**
+   * Whether the tree allows dragging.
+   * @selector [data-allows-dragging]
+   */
+  allowsDragging: boolean,
   /**
    * State of the tree.
    */
@@ -185,6 +196,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   let hasDropHooks = !!dragAndDropHooks?.useDroppableCollectionState;
   let dragHooksProvided = useRef(hasDragHooks);
   let dropHooksProvided = useRef(hasDropHooks);
+  
   useEffect(() => {
     if (dragHooksProvided.current !== hasDragHooks) {
       console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
@@ -251,12 +263,15 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       : null;
   }
 
+  let [treeDropTargetDelegate] = useState(() => new TreeDropTargetDelegate());
   if (hasDropHooks && dragAndDropHooks) {
     dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection: state.collection,
       selectionManager: state.selectionManager
     });
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(state.collection, ref, {direction});
+    treeDropTargetDelegate.setup(dropTargetDelegate, state, direction);
+
     let keyboardDelegate = props.keyboardDelegate ||
       new ListKeyboardDelegate({
         collection: state.collection,
@@ -270,26 +285,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     droppableCollection = dragAndDropHooks.useDroppableCollection!(
       {
         keyboardDelegate,
-        dropTargetDelegate: {
-          getDropTargetFromPoint(x, y, isValidDropTarget) {
-            let target = dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
-            if (target?.type === 'item' && target.dropPosition === 'after') {
-              let nextKey = state.collection.getKeyAfter(target.key);
-              if (nextKey != null) {
-                let beforeTarget = {
-                  type: 'item',
-                  key: nextKey,
-                  dropPosition: 'before'
-                } as const;
-                if (isValidDropTarget(beforeTarget)) {
-                  return beforeTarget;
-                }
-              }
-            }
-
-            return target;
-          }
-        },
+        dropTargetDelegate: treeDropTargetDelegate,
         onDropActivate: (e) => {
           // Expand collapsed item when dragging over. For keyboard, allow collapsing.
           if (e.target.type === 'item') {
@@ -324,7 +320,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       let currentDraggingKeys = dragState?.draggingKeys ?? new Set();
 
       if (isInternal && target.type === 'item' && currentDraggingKeys.size > 0) {
-        if (currentDraggingKeys.has(target.key)) {
+        if (currentDraggingKeys.has(target.key) && target.dropPosition === 'on') {
           return 'cancel';
         }
 
@@ -345,12 +341,16 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     isRootDropTarget = dropState.isDropTarget({type: 'root'});
   }
 
+  let isTreeDraggable = !!(hasDragHooks && !dragState?.isDisabled);
+
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let renderValues = {
     isEmpty: state.collection.size === 0,
     isFocused,
     isFocusVisible,
     isDropTarget: isRootDropTarget,
+    selectionMode: state.selectionManager.selectionMode,
+    allowsDragging: !!isTreeDraggable,
     state
   };
 
@@ -394,7 +394,9 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
           data-empty={state.collection.size === 0 || undefined}
           data-focused={isFocused || undefined}
           data-drop-target={isRootDropTarget || undefined}
-          data-focus-visible={isFocusVisible || undefined}>
+          data-focus-visible={isFocusVisible || undefined}
+          data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}
+          data-allows-dragging={!!isTreeDraggable || undefined}>
           <Provider
             values={[
               [TreeStateContext, state],
@@ -871,7 +873,6 @@ function TreeDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<H
   }
 
   let level = dropState && props.target.type === 'item' ? (dropState.collection.getItem(props.target.key)?.level || 0) + 1 : 1;
-
   return (
     <TreeDropIndicatorForwardRef
       {...props}
@@ -903,6 +904,7 @@ function TreeDropIndicator(props: TreeDropIndicatorProps, ref: ForwardedRef<HTML
     ...otherProps,
     defaultClassName: 'react-aria-DropIndicator',
     defaultStyle: {
+      position: 'relative',
       // @ts-ignore
       '--tree-item-level': level
     },
@@ -949,3 +951,5 @@ function RootDropIndicator() {
     </div>
   );
 }
+
+
diff --git a/packages/react-aria-components/src/TreeDropTargetDelegate.ts b/packages/react-aria-components/src/TreeDropTargetDelegate.ts
new file mode 100644
index 00000000000..daee51861ed
--- /dev/null
+++ b/packages/react-aria-components/src/TreeDropTargetDelegate.ts
@@ -0,0 +1,304 @@
+import {Direction, DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, RootDropTarget} from '@react-types/shared';
+
+interface TreeCollection<T> extends Iterable<Node<T>> {
+  getItem(key: Key): Node<T> | null,
+  getChildren?(key: Key): Iterable<Node<T>>,
+  getKeyAfter(key: Key): Key | null,
+  getKeyBefore(key: Key): Key | null
+}
+
+interface TreeState<T> {
+  collection: TreeCollection<T>,
+  expandedKeys: Set<Key>
+}
+
+interface PointerTracking {
+  lastY: number,
+  lastX: number,
+  yDirection: 'up' | 'down' | null,
+  xDirection: 'left' | 'right' | null,
+  boundaryContext: {
+    parentKey: Key,
+    lastSwitchY: number,
+    lastSwitchX: number,
+    preferredTargetIndex?: number
+  } | null
+}
+
+const X_SWITCH_THRESHOLD = 10;
+const Y_SWITCH_THRESHOLD = 5;
+export class TreeDropTargetDelegate<T> {
+  private delegate: DropTargetDelegate | null = null;
+  private state: TreeState<T> | null = null;
+  private direction: Direction = 'ltr';
+  private pointerTracking: PointerTracking = {
+    lastY: 0,
+    lastX: 0,
+    yDirection: null,
+    xDirection: null,
+    boundaryContext: null
+  };
+
+  setup(delegate: DropTargetDelegate, state: TreeState<T>, direction: Direction): void {
+    this.delegate = delegate;
+    this.state = state;
+    this.direction = direction;
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
+    let baseTarget = this.delegate!.getDropTargetFromPoint(x, y, isValidDropTarget);
+    if (!baseTarget || baseTarget.type === 'root') {
+      return baseTarget;
+    }
+
+    return this.resolveDropTarget(baseTarget, x, y, isValidDropTarget);
+  }
+
+  private resolveDropTarget(
+    target: ItemDropTarget,
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean
+  ): RootDropTarget | ItemDropTarget | null {
+    let tracking = this.pointerTracking;
+
+    // Calculate movement directions
+    let deltaY = y - tracking.lastY;
+    let deltaX = x - tracking.lastX;
+    let currentYMovement: 'up' | 'down' | null = tracking.yDirection;
+    let currentXMovement: 'left' | 'right' | null = tracking.xDirection;
+
+    if (Math.abs(deltaY) > Y_SWITCH_THRESHOLD) {
+      currentYMovement = deltaY > 0 ? 'down' : 'up';
+      tracking.yDirection = currentYMovement;
+      tracking.lastY = y;
+    }
+
+    if (Math.abs(deltaX) > X_SWITCH_THRESHOLD) {
+      currentXMovement = deltaX > 0 ? 'right' : 'left';
+      tracking.xDirection = currentXMovement;
+      tracking.lastX = x;
+    }
+
+    // Normalize to 'after'
+    if (target.dropPosition === 'before') {
+      let keyBefore = this.state!.collection.getKeyBefore(target.key);
+      if (keyBefore != null) {
+        target = {
+          type: 'item',
+          key: keyBefore,
+          dropPosition: 'after'
+        } as const;
+      }
+    }
+
+    let potentialTargets = this.getPotentialTargets(target, isValidDropTarget);
+
+    if (potentialTargets.length === 0) {
+      return {type: 'root'};
+    }
+
+    let resolvedItemTarget: ItemDropTarget;
+    if (potentialTargets.length > 1) {
+      resolvedItemTarget = this.selectTarget(potentialTargets, target, x, y, currentYMovement, currentXMovement);
+    } else {
+      resolvedItemTarget = potentialTargets[0];
+      // Reset boundary context since we're not in a boundary case
+      tracking.boundaryContext = null;
+    }
+
+    return resolvedItemTarget;
+  }
+
+  // Returns potential targets for an ambiguous drop position (e.g. after the last child of a parent, or after the parent itself)
+  // Ordered by level, from innermost to outermost.
+  private getPotentialTargets(originalTarget: ItemDropTarget, isValidDropTarget: (target: DropTarget) => boolean): ItemDropTarget[] {
+    if (originalTarget.dropPosition === 'on') {
+      return [originalTarget];
+    }
+
+    let target = originalTarget;
+    let collection = this.state!.collection;
+
+    let currentItem = collection.getItem(target.key);
+    while (currentItem && currentItem?.type !== 'item' && currentItem.nextKey != null) {
+      target.key = currentItem.nextKey;
+      currentItem = collection.getItem(currentItem.nextKey);
+    }
+
+    let potentialTargets = [target];
+
+    // If target has children and is expanded, use "before first child"
+    if (currentItem && currentItem.hasChildNodes && this.state!.expandedKeys.has(currentItem.key) && collection.getChildren && target.dropPosition === 'after') {
+      let firstChildItemNode: Node<T> | null = null;
+      for (let child of collection.getChildren(currentItem.key)) {
+        if (child.type === 'item') {
+          firstChildItemNode = child;
+          break;
+        }
+      }
+
+      if (firstChildItemNode) {
+        const beforeFirstChildTarget = {
+          type: 'item',
+          key: firstChildItemNode.key,
+          dropPosition: 'before'
+        } as const;
+
+        if (isValidDropTarget(beforeFirstChildTarget)) {
+          return [beforeFirstChildTarget];
+        } else {
+          return [];
+        }
+      }
+    }
+
+    if (currentItem?.nextKey != null) {
+      return [originalTarget];
+    }
+
+    // Walk up the parent chain to find ancestors that are the last child at their level
+    let parentKey = currentItem?.parentKey;
+    let ancestorTargets: ItemDropTarget[] = [];
+
+    while (parentKey) {
+      let parentItem = collection.getItem(parentKey);
+      let nextItem = parentItem?.nextKey ? collection.getItem(parentItem.nextKey) : null;
+      let isLastChildAtLevel = !nextItem || nextItem.parentKey !== parentKey;
+
+      if (isLastChildAtLevel) {
+        let afterParentTarget = {
+          type: 'item',
+          key: parentKey,
+          dropPosition: 'after'
+        } as const;
+
+        if (isValidDropTarget(afterParentTarget)) {
+          ancestorTargets.push(afterParentTarget);
+        }
+        if (nextItem) {
+          break;
+        }
+      }
+
+      parentKey = parentItem?.parentKey;
+    }
+
+    if (ancestorTargets.length > 0) {
+      potentialTargets.push(...ancestorTargets);
+    }
+
+    // Handle converting "after" to "before next" for non-ambiguous cases
+    if (potentialTargets.length === 1) {
+      let nextKey = collection.getKeyAfter(target.key);
+      let nextNode = nextKey ? collection.getItem(nextKey) : null;
+      if (nextKey != null && nextNode && currentItem && nextNode.level != null && currentItem.level != null && nextNode.level > currentItem.level) {
+        let beforeTarget = {
+          type: 'item',
+          key: nextKey,
+          dropPosition: 'before'
+        } as const;
+        if (isValidDropTarget(beforeTarget)) {
+          return [beforeTarget];
+        }
+      }
+    }
+
+    return potentialTargets.filter(isValidDropTarget);
+  }
+
+  private selectTarget(
+    potentialTargets: ItemDropTarget[],
+    originalTarget: ItemDropTarget,
+    x: number,
+    y: number,
+    currentYMovement: 'up' | 'down' | null,
+    currentXMovement: 'left' | 'right' | null
+  ): ItemDropTarget {
+    if (potentialTargets.length < 2) {
+      return potentialTargets[0];
+    }
+
+    let tracking = this.pointerTracking;
+    let currentItem = this.state!.collection.getItem(originalTarget.key);
+    let parentKey = currentItem?.parentKey;
+
+    if (!parentKey) {
+      return potentialTargets[0];
+    }
+
+    // More than 1 potential target - use Y for initial target, then X for switching levels
+    // Initialize boundary context if needed
+    if (!tracking.boundaryContext || tracking.boundaryContext.parentKey !== parentKey) {
+      // If entering from below, start with outer-most
+      let initialTargetIndex = tracking.yDirection === 'up' ? potentialTargets.length - 1 : 0;
+      tracking.boundaryContext = {
+        parentKey,
+        preferredTargetIndex: initialTargetIndex,
+        lastSwitchY: y,
+        lastSwitchX: x
+      };
+    }
+
+    let boundaryContext = tracking.boundaryContext;
+    let distanceFromLastXSwitch = Math.abs(x - boundaryContext.lastSwitchX);
+    let distanceFromLastYSwitch = Math.abs(y - boundaryContext.lastSwitchY);
+
+    // Switch between targets based on Y movement
+    if (distanceFromLastYSwitch > Y_SWITCH_THRESHOLD && currentYMovement) {
+      let currentIndex = boundaryContext.preferredTargetIndex || 0;
+
+      if (currentYMovement === 'down' && currentIndex === 0) {
+        // Moving down from inner-most, switch to outer-most
+        boundaryContext.preferredTargetIndex = potentialTargets.length - 1;
+      } else if (currentYMovement === 'up' && currentIndex === potentialTargets.length - 1) {
+        // Moving up from outer-most, switch to inner-most
+        boundaryContext.preferredTargetIndex = 0;
+      }
+
+      // Reset x tracking so that moving diagonally doesn't cause flickering.
+      tracking.xDirection = null;
+    }
+
+    // X movement controls level selection
+    if (distanceFromLastXSwitch > X_SWITCH_THRESHOLD && currentXMovement) {
+      let currentTargetIndex = boundaryContext.preferredTargetIndex || 0;
+
+      if (currentXMovement === 'left') {
+        if (this.direction === 'ltr') {
+          // LTR: left = move to higher level in tree (increase index)
+          if (currentTargetIndex < potentialTargets.length - 1) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        } else {
+          // RTL: left = move to lower level in tree (decrease index)
+          if (currentTargetIndex > 0) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        }
+      } else if (currentXMovement === 'right') {
+        if (this.direction === 'ltr') {
+          // LTR: right = move to lower level in tree (decrease index)
+          if (currentTargetIndex > 0) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex - 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        } else {
+          // RTL: right = move to higher level in tree (increase index)
+          if (currentTargetIndex < potentialTargets.length - 1) {
+            boundaryContext.preferredTargetIndex = currentTargetIndex + 1;
+            boundaryContext.lastSwitchX = x;
+          }
+        }
+      }
+
+      // Reset y tracking so that moving diagonally doesn't cause flickering.
+      tracking.yDirection = null;
+    }
+
+    let targetIndex = Math.max(0, Math.min(boundaryContext.preferredTargetIndex || 0, potentialTargets.length - 1));
+    return potentialTargets[targetIndex];
+  }
+}
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index 9de089337db..c40d3830e9d 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -692,15 +692,26 @@ function TreeDragAndDropExample(args) {
 
   let getItems = (keys) => [...keys].map(key => {
     let item = treeData.getItem(key)!;
+
+    let serializeItem = (nodeItem) => ({
+      ...nodeItem.value,
+      childItems: nodeItem.children ? [...nodeItem.children].map(serializeItem) : []
+    });
+
     return {
       'text/plain': item.value.name,
-      'tree-item': JSON.stringify(item.value)
+      'tree-item': JSON.stringify(serializeItem(item))
     };
   });
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems,
     getAllowedDropOperations: () => ['move'],
+    renderDragPreview(items) {
+      return (
+        <div style={{background: 'blue', color: 'white', padding: '4px'}}>{items.length} items</div>
+      );
+    },
     shouldAcceptItemDrop: (target) => {
       if (args.shouldAcceptItemDrop === 'folders') {
         let item = treeData.getItem(target.key);
@@ -751,7 +762,7 @@ function SecondTree(args) {
     getChildren: item => item.childItems
   });
 
-  let getItems = async (e) => {
+  let processIncomingItems = async (e) => {
     return await Promise.all(e.items.filter(isTextDropItem).map(async item => {
       let parsed = JSON.parse(await item.getText('tree-item'));
       let convertItem = item => ({
@@ -763,23 +774,71 @@ function SecondTree(args) {
     }));
   };
 
+  let getItems = (keys) => [...keys].map(key => {
+    let item = treeData.getItem(key)!;
+
+    let serializeItem = (nodeItem) => ({
+      ...nodeItem.value,
+      childItems: nodeItem.children ? [...nodeItem.children].map(serializeItem) : []
+    });
+
+    return {
+      'text/plain': item.value.name,
+      'tree-item': JSON.stringify(serializeItem(item))
+    };
+  });
+
+  let onInsert = async (e)  => {
+    let items = await processIncomingItems(e);
+    if (e.target.dropPosition === 'before') {
+      treeData.insertBefore(e.target.key, ...items);
+    } else if (e.target.dropPosition === 'after') {
+      treeData.insertAfter(e.target.key, ...items);
+    }
+  };
+
   let {dragAndDropHooks} = useDragAndDrop({
+    getItems, // Enable dragging FROM this tree
+    getAllowedDropOperations: () => ['move'],
     acceptedDragTypes: ['tree-item'],
-    async onInsert(e) {
-      let items = await getItems(e);
-      if (e.target.dropPosition === 'before') {
-        treeData.insertBefore(e.target.key, ...items);
-      } else if (e.target.dropPosition === 'after') {
-        treeData.insertAfter(e.target.key, ...items);
-      }
-    },
+    onInsert: args.shouldAllowInsert ? onInsert : undefined,
     async onItemDrop(e) {
-      let items = await getItems(e);
+      let items = await processIncomingItems(e);
       treeData.insert(e.target.key, 0, ...items);
     },
     async onRootDrop(e) {
-      let items = await getItems(e);
+      let items = await processIncomingItems(e);
       treeData.insert(null, 0, ...items);
+    },
+    shouldAcceptItemDrop: (target) => {
+      if (args.shouldAcceptItemDrop === 'folders') {
+        let item = treeData.getItem(target.key);
+        return item?.value?.childItems?.length > 0;
+      }
+      return true;
+    },
+    [args.dropFunction]: (e: DroppableCollectionReorderEvent) => {
+      console.log(`moving [${[...e.keys].join(',')}] ${e.target.dropPosition} ${e.target.key} in SecondTree`);
+      try {
+        if (e.target.dropPosition === 'before') {
+          treeData.moveBefore(e.target.key, e.keys);
+        } else if (e.target.dropPosition === 'after') {
+          treeData.moveAfter(e.target.key, e.keys);
+        } else if (e.target.dropPosition === 'on') {
+          let targetNode = treeData.getItem(e.target.key);
+          if (targetNode) {
+            let targetIndex = targetNode.children ? targetNode.children.length : 0;
+            let keyArray = Array.from(e.keys);
+            for (let i = 0; i < keyArray.length; i++) {
+              treeData.move(keyArray[i], e.target.key, targetIndex + i);
+            }
+          } else {
+            console.error('Target node not found for drop on:', e.target.key);
+          }
+        }
+      } catch (error) {
+        console.error(error);
+      }
     }
   });
 
@@ -813,6 +872,7 @@ export const TreeWithDragAndDrop = {
   args: {
     dropFunction: 'onMove',
     shouldAcceptItemDrop: 'all',
+    shouldAllowInsert: true,
     ...TreeExampleDynamic.args
   },
   argTypes: {
diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx
index 0309f912c07..4b065dee150 100644
--- a/packages/react-aria-components/test/Tree.test.tsx
+++ b/packages/react-aria-components/test/Tree.test.tsx
@@ -12,12 +12,15 @@
 
 import {act, fireEvent, mockClickDefault, pointerMap, render, setupIntersectionObserverMock, within} from '@react-spectrum/test-utils-internal';
 import {AriaTreeTests} from './AriaTree.test-util';
-import {Button, Checkbox, Collection, ListLayout, Text, Tree, TreeItem, TreeItemContent, UNSTABLE_TreeLoadingSentinel, Virtualizer} from '../';
+import {Button, Checkbox, Collection, DropIndicator, ListLayout, Text, Tree, TreeItem, TreeItemContent, UNSTABLE_TreeLoadingSentinel, useDragAndDrop, Virtualizer} from '../';
 import {composeStories} from '@storybook/react';
+// @ts-ignore
+import {DataTransfer, DragEvent} from '@react-aria/dnd/test/mocks';
 import React from 'react';
 import * as stories from '../stories/Tree.stories';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
+import {useTreeData} from 'react-stately';
 
 let {
   EmptyTreeStaticStory: EmptyLoadingTree,
@@ -102,12 +105,16 @@ let DynamicTreeItem = (props) => {
   return (
     <TreeItem {...props}>
       <TreeItemContent>
-        {({isExpanded, hasChildItems, selectionMode, selectionBehavior}) => (
+        {({isExpanded, hasChildItems, selectionMode, selectionBehavior, allowsDragging}) => (
           <>
             {(selectionMode !== 'none' || props.href != null) && selectionBehavior === 'toggle' && (
               <Checkbox slot="selection" />
             )}
+            {allowsDragging && (
+              <Button slot="drag">≡</Button>
+            )}
             {hasChildItems && <Button slot="chevron">{isExpanded ? '⏷' : '⏵'}</Button>}
+            {props.supportsDragging && <Button slot="drag">≡</Button>}
             <Text>{props.title || props.children}</Text>
             <Button aria-label="Info">ⓘ</Button>
             <Button aria-label="Menu">☰</Button>
@@ -116,7 +123,7 @@ let DynamicTreeItem = (props) => {
       </TreeItemContent>
       <Collection items={props.childItems}>
         {(item: any) => (
-          <DynamicTreeItem childItems={item.childItems} textValue={item.name} href={props.href}>
+          <DynamicTreeItem supportsDragging={props.supportsDragging} childItems={item.childItems} textValue={item.name} href={props.href}>
             {item.name}
           </DynamicTreeItem>
         )}
@@ -135,6 +142,24 @@ let DynamicTree = ({treeProps = {}, rowProps = {}}) => (
   </Tree>
 );
 
+let DraggableTree = (props) => {
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map((key) => ({'text/plain': key})),
+    ...props
+  });
+
+  return <DynamicTree treeProps={{dragAndDropHooks}} />;
+};
+
+let DraggableTreeWithSelection = (props) => {
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map((key) => ({'text/plain': key})),
+    ...props
+  });
+
+  return <DynamicTree treeProps={{dragAndDropHooks, selectionMode: 'multiple'}} />;
+};
+
 describe('Tree', () => {
   let user;
   let testUtilUser = new User();
@@ -1655,8 +1680,198 @@ describe('Tree', () => {
       expect(onSelectionChange).toBeCalledTimes(1);
     });
   });
-});
 
+  describe('drag and drop', () => {
+    let getItems = jest.fn();
+    function DnDTree(props) {
+      let treeData = useTreeData<any>({
+        initialItems: rows,
+        getKey: item => item.id,
+        getChildren: item => item.childItems
+      });
+
+      let {dragAndDropHooks} = useDragAndDrop({
+        getItems: (keys) => {
+          getItems(keys);
+          return [...keys].map((key) => ({
+            'text/plain': treeData.getItem(key)?.value.name
+          }));
+        },
+        getAllowedDropOperations: () => ['move']
+      });
+
+      return (
+        <Tree dragAndDropHooks={dragAndDropHooks} aria-label="Tree with drag and drop" items={treeData.items} {...props}>
+          {(item: any) => (
+            <DynamicTreeItem id={item.key} childItems={item.children ?? []} textValue={item.value.name} supportsDragging>
+              {item.value.name}
+            </DynamicTreeItem>
+          )}
+        </Tree>
+      );
+    }
+
+    afterEach(() => {
+      act(() => {jest.runAllTimers();});
+      jest.clearAllMocks();
+    });
+    
+    it('should support drag button slot', () => {
+      let {getAllByRole} = render(<DraggableTree />);
+      let button = getAllByRole('button')[0];
+      expect(button).toHaveAttribute('aria-label', 'Drag Projects');
+    });
+
+    it('should render drop indicators', async () => {
+      let onReorder = jest.fn();
+      let {getAllByRole} = render(<DraggableTree onReorder={onReorder} renderDropIndicator={(target) => <DropIndicator target={target}>Test</DropIndicator>} />);
+      await user.tab();
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      let rows = getAllByRole('row');
+      expect(rows).toHaveLength(4);
+      expect(rows[0]).toHaveAttribute('class', 'react-aria-DropIndicator');
+      expect(rows[0]).not.toHaveAttribute('data-drop-target', 'true');
+      expect(rows[0]).toHaveTextContent('Test');
+      expect(within(rows[0]).getByRole('button')).toHaveAttribute('aria-label', 'Insert before Projects');
+      expect(rows[2]).toHaveAttribute('class', 'react-aria-DropIndicator');
+      expect(rows[2]).toHaveAttribute('data-drop-target');
+      expect(within(rows[2]).getByRole('button')).toHaveAttribute('aria-label', 'Insert between Projects and Reports');
+      expect(rows[3]).toHaveAttribute('class', 'react-aria-DropIndicator');
+      expect(rows[3]).not.toHaveAttribute('data-drop-target');
+      expect(within(rows[3]).getByRole('button')).toHaveAttribute('aria-label', 'Insert after Reports');
+
+      await user.keyboard('{ArrowDown}');
+
+      expect(document.activeElement).toHaveAttribute('aria-label', 'Insert after Reports');
+      expect(rows[0]).not.toHaveAttribute('data-drop-target', 'true');
+      expect(rows[2]).not.toHaveAttribute('data-drop-target', 'true');
+      expect(rows[3]).toHaveAttribute('data-drop-target', 'true');
+
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      expect(onReorder).toHaveBeenCalledTimes(1);
+    });
+
+    it('should support dropping on items', async () => {
+      let onItemDrop = jest.fn();
+      let {getAllByRole} = render(<>
+        <DraggableTree />
+        <DraggableTree onItemDrop={onItemDrop} />
+      </>);
+
+      await user.tab();
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      let tree = getAllByRole('treegrid')[1];
+      let rows = within(tree).getAllByRole('row');
+      expect(rows).toHaveLength(20);
+      expect(within(rows[0]).getAllByRole('button')[0]).toHaveAttribute('aria-label', 'Drop on Projects');
+      expect(rows[0].nextElementSibling).toHaveAttribute('data-drop-target', 'true');
+      expect(within(rows[1]).getAllByRole('button')[0]).toHaveAttribute('aria-label', 'Drop on Project 1');
+      expect(rows[1].nextElementSibling).not.toHaveAttribute('data-drop-target');
+      expect(within(rows[2]).getAllByRole('button')[0]).toHaveAttribute('aria-label', 'Drop on Project 2');
+      expect(rows[2].nextElementSibling).not.toHaveAttribute('data-drop-target');
+
+      expect(document.activeElement).toBe(within(rows[0]).getAllByRole('button')[0]);
+
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      expect(onItemDrop).toHaveBeenCalledTimes(1);
+    });
+
+    it('should support dropping on the root', async () => {
+      let onRootDrop = jest.fn();
+      let {getAllByRole} = render(<>
+        <DraggableTree />
+        <DraggableTree onRootDrop={onRootDrop} />
+      </>);
+
+      await user.tab();
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      let tree = getAllByRole('treegrid')[1];
+      let rows = within(tree).getAllByRole('row');
+      expect(rows).toHaveLength(1);
+      expect(within(rows[0]).getAllByRole('button')[0]).toHaveAttribute('aria-label', 'Drop on');
+      expect(document.activeElement).toBe(within(rows[0]).getAllByRole('button')[0]);
+      expect(tree).toHaveAttribute('data-drop-target', 'true');
+
+      await user.keyboard('{Enter}');
+      act(() => jest.runAllTimers());
+
+      expect(onRootDrop).toHaveBeenCalledTimes(1);
+    });
+
+    it('should support disabled drag and drop', async () => {
+      let {getByRole, queryAllByRole} = render(
+        <DraggableTree isDisabled />
+      );
+
+      let dragButtons = queryAllByRole('button').filter(button => button.getAttribute('slot') === 'drag');
+      dragButtons.forEach(button => {
+        expect(button).toBeDisabled();
+      });
+
+      let tree = getByRole('treegrid');
+      expect(tree).not.toHaveAttribute('data-allows-dragging', 'true');
+      expect(tree).not.toHaveAttribute('draggable', 'true');
+
+      let rows = within(tree).getAllByRole('row');
+      rows.forEach(row => {
+        expect(row).not.toHaveAttribute('draggable', 'true');
+      });
+    });
+
+    it('should allow selection even when drag and drop is disabled', async () => {
+      let {getByRole, getAllByRole} = render(
+        <DraggableTreeWithSelection isDisabled />
+    );
+
+      for (let row of getAllByRole('row')) {
+        let checkbox = within(row).getByRole('checkbox');
+        expect(checkbox).not.toBeChecked();
+      }
+
+      let checkbox = getAllByRole('checkbox')[0];
+      expect(checkbox).toHaveAttribute('aria-label', 'Select');
+
+      await user.click(checkbox);
+
+      let tree = getByRole('treegrid');
+      let rows = within(tree).getAllByRole('row');
+      expect(rows[0]).toHaveAttribute('data-selected', 'true');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('should filter out selected child keys in getItems if a parent is also selected', async () => {
+      let {getAllByRole} = render(
+        <DnDTree selectionMode="multiple" selectedKeys={new Set(['projects', 'project-1', 'reports', 'reports-1AB', 'reports-2'])} />
+      );
+
+      let rows = getAllByRole('row');
+      let projectsRow = rows[0];
+      expect(projectsRow).toHaveAttribute('aria-selected', 'true');
+
+      let dataTransfer = new DataTransfer();
+
+      fireEvent.pointerDown(projectsRow, {pointerType: 'mouse', button: 0, pointerId: 1, clientX: 5, clientY: 5});
+      fireEvent(projectsRow, new DragEvent('dragstart', {dataTransfer, clientX: 5, clientY: 5}));
+      fireEvent.pointerUp(projectsRow, {button: 0, pointerId: 1, clientX: 5, clientY: 5});
+      fireEvent(projectsRow, new DragEvent('dragend', {dataTransfer, clientX: 5, clientY: 5}));
+      expect(getItems).toHaveBeenCalledTimes(1);
+      expect(getItems).toHaveBeenCalledWith(new Set(['projects', 'reports']));
+    });
+  });
+});
 
 AriaTreeTests({
   prefix: 'rac-static',