diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 46c7d7dcae..03a532d078 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -4,6 +4,7 @@
 
 .replicator-set-container {
     @apply outline-none;
+    min-height: 1rem;
 }
 
 .replicator-set {
@@ -80,3 +81,21 @@
 .replicator-fullscreen {
     @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
 }
+
+@scope (.replicator-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: auto;
+    }
+    * {
+        pointer-events: auto;
+    }
+}
+
+@scope (.replicator-not-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: not-allowed;
+    }
+    * {
+        pointer-events: none;
+    }
+}
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 1ab414772f..001f5b14a7 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -60,6 +60,7 @@ import ResourceDeleter from '../components/ResourceDeleter.vue';
 import Stack from '../components/stacks/Stack.vue';
 import StackTest from '../components/stacks/StackTest.vue';
 import CodeBlock from '../components/CodeBlock.vue';
+import SortableList from '../components/sortable/SortableList.vue';
 
 // Third Party
 Vue.component('v-select', vSelect)
@@ -129,6 +130,7 @@ Vue.component('create-entry-button', CreateEntryButton);
 Vue.component('popover', Popover);
 Vue.component('portal', Portal);
 Vue.component('code-block', CodeBlock);
+Vue.component('sortable-list', SortableList);
 
 // Recursive
 Vue.component('role-permission-tree', PermissionTree);
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index aca3362eb7..aba61aeefe 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -118,13 +118,18 @@ export function replicatorPreviewHtml(html) {
     return new PreviewHtml(html);
 }
 
-export function closestVm(el, name) {
-    let parent = el;
-    while (parent) {
-        if (parent.__vue__) break;
-        parent = parent.parentElement;
+export function closestVm(obj, name) {
+    let vm, parent;
+    if (obj instanceof HTMLElement) {
+        parent = obj;
+        while (parent) {
+            if (parent.__vue__) break;
+            parent = parent.parentElement;
+        }
+        vm = parent.__vue__;
+    } else {
+        vm = obj;
     }
-    let vm = parent.__vue__;
     while (vm !== vm.$root) {
         if (!name || name === vm.$options.name) return vm;
         vm = vm.$parent;
@@ -138,3 +143,22 @@ export function str_slug(string) {
 export function snake_case(string) {
     return Statamic.$slug.separatedBy('_').create(string);
 }
+
+export function arrayAdd(items, item, index) {
+    return [
+        ...items.slice(0, index),
+        item,
+        ...items.slice(index, items.length)
+    ]
+}
+
+export function arrayRemove(items, index) {
+    return [
+        ...items.slice(0, index),
+        ...items.slice(index + 1, items.length)
+    ]
+}
+
+export function arrayMove(items, oldIndex, newIndex) {
+    return arrayAdd(arrayRemove(items, oldIndex), items[oldIndex], newIndex);
+}
\ No newline at end of file
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index fe01c7dfa1..19669aae6d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -6,7 +6,11 @@
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
 <div :class="{ wrapperClasses: fullScreenMode }">
-<div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
+<div class="replicator-fieldtype-container" :class="{
+    'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode,
+    'replicator-droppable': canDropSet === true,
+    'replicator-not-droppable': canDropSet === false,
+}">
 
     <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 border-b dark:border-dark-900 p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
         <h2 v-text="__(config.display)" class="flex-1" />
@@ -43,11 +47,15 @@
         <sortable-list
             :value="value"
             :vertical="true"
-            :item-class="sortableItemClass"
-            :handle-class="sortableHandleClass"
+            group="replicator-fieldtype"
+            :group-validator="sortableGroupValidator"
+            item-class="replicator-sortable-item"
+            handle-class="replicator-sortable-handle"
             append-to="body"
             constrain-dimensions
             @input="sorted($event)"
+            @groupstart="sortableGroupStart"
+            @groupend="sortableGroupEnd"
             @dragstart="$emit('focus')"
             @dragend="$emit('blur')"
         >
@@ -59,9 +67,10 @@
                     :values="set"
                     :meta="meta.existing[set._id]"
                     :config="setConfig(set.type)"
+                    :config-hash="setConfigHash(set.type)"
                     :parent-name="name"
-                    :sortable-item-class="sortableItemClass"
-                    :sortable-handle-class="sortableHandleClass"
+                    sortable-item-class="replicator-sortable-item"
+                    sortable-handle-class="replicator-sortable-handle"
                     :is-read-only="isReadOnly"
                     :collapsed="collapsed.includes(set._id)"
                     :field-path-prefix="fieldPathPrefix || handle"
@@ -117,6 +126,7 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import reduce from 'underscore/modules/reduce';
+import { closestVm } from '../../../bootstrap/globals';
 
 export default {
 
@@ -136,6 +146,7 @@ export default {
             collapsed: clone(this.meta.collapsed),
             previews: this.meta.previews,
             fullScreenMode: false,
+            canDropSet: null,
             provide: {
                 storeName: this.storeName,
                 replicatorSets: this.config.sets
@@ -157,16 +168,12 @@ export default {
             }, []);
         },
 
-        groupConfigs() {
-            return this.config.sets;
+        setConfigHashes() {
+            return this.meta.setConfigHashes;
         },
 
-        sortableItemClass() {
-            return `${this.name}-sortable-item`;
-        },
-
-        sortableHandleClass() {
-            return `${this.name}-sortable-handle`;
+        groupConfigs() {
+            return this.config.sets;
         },
 
         storeState() {
@@ -186,6 +193,10 @@ export default {
             return _.find(this.setConfigs, { handle }) || {};
         },
 
+        setConfigHash(handle) {
+            return this.setConfigHashes[handle];
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
@@ -196,8 +207,32 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-        sorted(value) {
-            this.update(value);
+        sorted({ operation, oldIndex, newIndex, oldList }) {
+            if (operation === 'move') {
+                // Move set within this replicator
+                this.update(arrayMove(this.value, oldIndex, newIndex));
+            } else if (operation === 'add') {
+                // Add set to this replicator
+                const oldReplicator = closestVm(oldList, 'replicator-fieldtype');
+                const set = oldReplicator.value[oldIndex];
+                const meta = oldReplicator.meta.existing[set._id];
+                const previews = oldReplicator.previews[set._id];
+                this.updateSetPreviews(set._id, previews);
+                this.updateSetMeta(set._id, meta);
+                this.update(arrayAdd(this.value, set, newIndex));
+                if (oldReplicator.collapsed.includes(set._id)) {
+                    this.collapseSet(set._id);
+                } else {
+                    this.expandSet(set._id);
+                }
+                // Remove set from old replicator
+                // Do this from the target replicator in order to avoid race conditions with nested
+                // replicators both trying to update their parent's value at the same time.
+                this.$nextTick(() => {
+                    oldReplicator.removeSetMeta(set._id);
+                    oldReplicator.update(arrayRemove(oldReplicator.value, oldIndex)); 
+                });
+            }
         },
 
         addSet(handle, index) {
@@ -285,6 +320,20 @@ export default {
 
             return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
         },
+
+        sortableGroupValidator({ source }) {
+            this.canDropSet = this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
+            return this.canDropSet;
+        },
+
+        sortableGroupStart({ valid }) {
+            this.canDropSet = valid;
+        },
+
+        sortableGroupEnd() {
+            this.canDropSet = null;
+        },
+
     },
 
     mounted() {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 47ee202824..9d6d5c81f2 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div :class="sortableItemClass">
+    <div :class="sortableItemClass" :data-config-hash="configHash">
         <slot name="picker" />
         <div class="replicator-set" :class="{ 'has-error': this.hasError }">
 
@@ -91,6 +91,10 @@ export default {
             type: Object,
             required: true
         },
+        configHash: {
+            type: String,
+            required: true
+        },
         meta: {
             type: Object,
             required: true
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index ce1cc588dc..10cd3b4545 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,18 +1,8 @@
 <script>
 import { Sortable, Plugins } from '@shopify/draggable'
+import { closestVm } from '../../bootstrap/globals';
 
-function move(items, oldIndex, newIndex) {
-    const itemRemovedArray = [
-        ...items.slice(0, oldIndex),
-        ...items.slice(oldIndex + 1, items.length)
-    ]
-
-    return [
-        ...itemRemovedArray.slice(0, newIndex),
-        items[oldIndex],
-        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length)
-    ]
-}
+const instances = {};
 
 export default {
 
@@ -20,6 +10,12 @@ export default {
         value: {
             required: true,
         },
+        group: {
+            default: null,
+        },
+        groupValidator: {
+            default: null,
+        },
         itemClass: {
             default: 'sortable-item',
         },
@@ -63,6 +59,7 @@ export default {
     data() {
         return {
             sortable: null,
+            instanceId: this.group || uniqid(),
         }
     },
 
@@ -119,18 +116,53 @@ export default {
     },
 
     methods: {
+
         setupSortableList() {
-            this.sortable = new Sortable(this.$el, this.computedOptions);
+            this.sortable = this.connectInstace(this.instanceId, this.$el, this.computedOptions);
 
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
-            this.sortable.on('sortable:stop', ({ oldIndex, newIndex }) => {
-                this.$emit('input', move(this.value, oldIndex, newIndex))
-            })
+            this.sortable.on('sortable:stop', (event) => {
+                const { oldIndex, newIndex, oldContainer, newContainer } = event;
+                if (!this.group) {
+                    this.$emit('input', arrayMove(this.value, oldIndex, newIndex));
+                    return;           
+                }
+                const payload = { oldIndex, newIndex };
+                if (newContainer === this.$el && oldContainer === this.$el) {
+                    this.$emit('input', { operation: 'move', oldList: this, newList: this, ...payload });
+                } else if (newContainer === this.$el) {
+                    this.$emit('input', { operation: 'add', oldList: closestVm(oldContainer, 'sortable-list'), newList: this, ...payload });
+                } else if (oldContainer === this.$el) {
+                    this.$emit('input', { operation: 'remove', oldList: this, newList: closestVm(newContainer, 'sortable-list'), ...payload });
+                }
+            });
+
+            if (this.group && this.groupValidator) {
+                this.sortable.on('sortable:sort', (event) => {
+                    const { dragEvent } = event;
+                    const { sourceContainer, overContainer, source } = dragEvent;
+                    if (overContainer !== this.$el || sourceContainer === this.$el) {
+                        return;
+                    }
+                    if (!this.groupValidator({ source })) {
+                        event.cancel();
+                    }
+                });
+                this.sortable.on('sortable:start', (event) => {
+                    const { dragEvent } = event;
+                    const { source } = dragEvent;
+                    const valid = this.groupValidator({ source });
+                    this.$emit('groupstart', { valid });
+                });
+                this.sortable.on('sortable:stop', () => {
+                    this.$emit('groupend');
+                });
+            }
 
             this.$on('hook:destroyed', () => {
-                this.sortable.destroy()
+                this.destroySortableList();
             })
 
             if (this.mirror === false) {
@@ -139,8 +171,28 @@ export default {
         },
 
         destroySortableList() {
-            this.sortable.destroy()
+            this.disconnectInstace(this.instanceId, this.$el);
         },
+
+        connectInstace(id, container, options) {
+            if (!instances[id]) {
+                instances[id] = new Sortable(container, options);
+            } else {
+                instances[id].addContainer(container);
+            }
+            return instances[id];
+        },
+
+        disconnectInstace(id, container) {
+            if (instances[id]) {
+                instances[id].removeContainer(container);
+                if (instances[id].containers.length === 0) {
+                    instances[id].destroy();
+                    delete instances[id];
+                }
+            }
+        },
+
     },
 
     watch: {
diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index 8f3ef80e9a..7dc87a8b2f 100644
--- a/src/Fields/Field.php
+++ b/src/Fields/Field.php
@@ -18,6 +18,7 @@ class Field implements Arrayable
     protected $handle;
     protected $prefix;
     protected $config;
+    protected $configHash;
     protected $value;
     protected $parent;
     protected $parentField;
@@ -459,6 +460,15 @@ public function form(): ?Form
         return $this->form;
     }
 
+    public function configHash(): string
+    {
+        if (! isset($this->configHash)) {
+            $this->configHash = md5($this->handle.json_encode($this->config));
+        }
+
+        return $this->configHash;
+    }
+
     public static function commonFieldOptions(): Fields
     {
         $reserved = [
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 96f06fb69a..99df8bf858 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -119,12 +119,13 @@ protected function preProcessRow($row, $index)
 
     public function fields($set, $index = -1)
     {
-        $config = Arr::get($this->flattenedSetsConfig(), "$set.fields");
-        $hash = md5($this->field->fieldPathPrefix().$index.json_encode($config));
+        $config = Arr::get($this->flattenedSetsConfig(), $set);
+        $configHash = $config['hash'] ?? 'invalid_set';
+        $itemHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
-        return Blink::once($hash, function () use ($config, $index) {
+        return Blink::once('replicator-'.$configHash.'-'.$itemHash, function () use ($config, $index) {
             return new Fields(
-                $config,
+                $config['fields'] ?? [],
                 $this->field()->parent(),
                 $this->field(),
                 $index
@@ -209,13 +210,13 @@ protected function performAugmentation($values, $shallow)
 
     public function preload()
     {
+        $configHash = $this->field->configHash();
+
         $existing = collect($this->field->value())->mapWithKeys(function ($set, $index) {
             return [$set['_id'] => $this->fields($set['type'], $index)->addValues($set)->meta()->put('_', '_')];
         })->toArray();
 
-        $blink = md5(json_encode($this->flattenedSetsConfig()));
-
-        $defaults = Blink::once($blink.'-defaults', function () {
+        $defaults = Blink::once('replicator-'.$configHash.'-defaults', function () {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) {
                 return $this->fields($handle)->all()->map(function ($field) {
                     return $field->fieldtype()->preProcess($field->defaultValue());
@@ -223,7 +224,7 @@ public function preload()
             })->all();
         });
 
-        $new = Blink::once($blink.'-new', function () use ($defaults) {
+        $new = Blink::once('replicator-'.$configHash.'-new', function () use ($defaults) {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) use ($defaults) {
                 return $this->fields($handle)->addValues($defaults[$handle])->meta()->put('_', '_');
             })->toArray();
@@ -241,14 +242,17 @@ public function preload()
             'defaults' => $defaults,
             'collapsed' => [],
             'previews' => $previews,
+            'setConfigHashes' => $this->flattenedSetsConfig()
+                ->map(fn ($set) => $set['hash'])
+                ->all(),
         ];
     }
 
     public function flattenedSetsConfig()
     {
-        $blink = md5($this->field?->handle().json_encode($this->field?->config()));
+        $configHash = $this->field->configHash();
 
-        return Blink::once($blink, function () {
+        return Blink::once('replicator-'.$configHash.'-sets', function () {
             $sets = collect($this->config('sets'));
 
             // If the first set doesn't have a nested "set" key, it would be the legacy format.
@@ -262,9 +266,16 @@ public function flattenedSetsConfig()
                 ]);
             }
 
-            return $sets->flatMap(function ($section) {
-                return $section['sets'];
-            });
+            return $sets
+                ->flatMap(function ($section) {
+                    return $section['sets'];
+                })
+                ->map(function ($config, $handle) {
+                    return [
+                        ...$config,
+                        'hash' => md5($handle.json_encode($config)),
+                    ];
+                });
         });
     }
 
diff --git a/tests/Modifiers/MarkTest.php b/tests/Modifiers/MarkTest.php
index 5f4f865bb0..8582319a0a 100644
--- a/tests/Modifiers/MarkTest.php
+++ b/tests/Modifiers/MarkTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Modifiers;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\Field;
 use Statamic\Fields\Value;
 use Statamic\Fieldtypes\Bard;
 use Statamic\Fieldtypes\Markdown;
@@ -78,7 +79,7 @@ public function it_marks_bard_value()
                     ['type' => 'text', 'text' => 'amet', 'marks' => [['type' => 'bold']]],
                 ],
             ],
-        ], 'content', new Bard());
+        ], 'content', (new Bard)->setField(new Field('test', [])));
         $words = 'elüt amet';
 
         $expected = '<p>Lorem, ipsum <mark>el&uuml;t</mark> sit <strong><mark>amet</mark></strong></p>';