@foreach (var item in Items2)
{
@@ -76,21 +76,21 @@
-
-
1
-
2
-
3
-
4
+
+ @foreach (var item in ItemsCloneLeft)
+ {
+
+ }
-
-
5
-
6
-
7
-
8
+
+ @foreach (var item in ItemsCloneRight)
+ {
+
+ }
+
+
+
+
+
+
+ @foreach (var item in AddItems1)
+ {
+
+ }
+
+
+
+
+
+
+ @foreach (var item in AddItems2)
+ {
+
+ }
+
+
+
+
+
+
+ @foreach (var item in AddItems3)
+ {
+
+ }
+
+
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
index 376a8c5902f..b3684580c10 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/SortableLists.razor.cs
@@ -17,9 +17,24 @@ public partial class SortableLists
[NotNull]
private List
? ItemsMultiDrags { get; set; }
+ [NotNull]
+ private List? ItemsCloneLeft { get; set; }
+
+ [NotNull]
+ private List? ItemsCloneRight { get; set; }
+
[NotNull]
private List? ItemsSwaps { get; set; }
+ [NotNull]
+ private List? AddItems1 { get; set; }
+
+ [NotNull]
+ private List? AddItems2 { get; set; }
+
+ [NotNull]
+ private List? AddItems3 { get; set; }
+
private readonly SortableOption _option1 = new()
{
RootSelector = ".sl-list"
@@ -89,6 +104,12 @@ public partial class SortableLists
Swap = true
};
+ private readonly SortableOption _optionAdd = new()
+ {
+ RootSelector = ".sl-list",
+ Group = "group-add"
+ };
+
///
/// OnInitialized
///
@@ -103,6 +124,11 @@ protected override void OnInitialized()
Items2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
ItemsMultiDrags = Foo.GenerateFoo(FooLocalizer, 8);
ItemsSwaps = Foo.GenerateFoo(FooLocalizer, 8);
+ ItemsCloneLeft = Foo.GenerateFoo(FooLocalizer, 4);
+ ItemsCloneRight = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
+ AddItems1 = Foo.GenerateFoo(FooLocalizer, 4);
+ AddItems2 = Foo.GenerateFoo(FooLocalizer, 8).Skip(4).ToList();
+ AddItems3 = Foo.GenerateFoo(FooLocalizer, 12).Skip(8).ToList();
}
private Task OnUpdate(SortableEvent @event)
@@ -112,7 +138,13 @@ private Task OnUpdate(SortableEvent @event)
var item = Items[oldIndex];
Items.RemoveAt(oldIndex);
Items.Insert(newIndex, item);
- StateHasChanged();
+ return Task.CompletedTask;
+ }
+
+ private Task OnAdd1(SortableEvent @event)
+ {
+ var item = Items2[@event.OldIndex];
+ Items1.Insert(@event.NewIndex, item);
return Task.CompletedTask;
}
@@ -123,40 +155,35 @@ private Task OnUpdate1(SortableEvent @event)
var item = Items1[oldIndex];
Items1.RemoveAt(oldIndex);
Items1.Insert(newIndex, item);
- StateHasChanged();
return Task.CompletedTask;
}
- private Task OnUpdate2(SortableEvent @event)
+ private Task OnRemove1(SortableEvent @event)
{
- var oldIndex = @event.OldIndex;
- var newIndex = @event.NewIndex;
- var item = Items2[oldIndex];
- Items2.RemoveAt(oldIndex);
- Items2.Insert(newIndex, item);
- StateHasChanged();
+ Items1.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}
- private Task OnRemove1(SortableEvent @event)
+ private Task OnAdd2(SortableEvent @event)
{
- var oldIndex = @event.OldIndex;
- var newIndex = @event.NewIndex;
- var item = Items1[oldIndex];
- Items1.RemoveAt(oldIndex);
- Items2.Insert(newIndex, item);
- StateHasChanged();
+ var item = Items1[@event.OldIndex];
+ Items2.Insert(@event.NewIndex, item);
return Task.CompletedTask;
}
- private Task OnRemove2(SortableEvent @event)
+ private Task OnUpdate2(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
var item = Items2[oldIndex];
Items2.RemoveAt(oldIndex);
- Items1.Insert(newIndex, item);
- StateHasChanged();
+ Items2.Insert(newIndex, item);
+ return Task.CompletedTask;
+ }
+
+ private Task OnRemove2(SortableEvent @event)
+ {
+ Items2.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}
@@ -186,9 +213,85 @@ private Task OnUpdateSwap(SortableEvent @event)
{
var oldIndex = @event.OldIndex;
var newIndex = @event.NewIndex;
- var item = ItemsSwaps[oldIndex];
- ItemsSwaps.RemoveAt(oldIndex);
- ItemsSwaps.Insert(newIndex, item);
+ var item1 = Utility.Clone(ItemsSwaps[oldIndex]);
+ var item2 = Utility.Clone(ItemsSwaps[newIndex]);
+ ItemsSwaps[oldIndex] = item2;
+ ItemsSwaps[newIndex] = item1;
+ return Task.CompletedTask;
+ }
+
+ private Task OnAddItems1(SortableEvent @event)
+ {
+ var foo = @event.FromId == "sl02"
+ ? AddItems2[@event.OldIndex]
+ : AddItems3[@event.OldIndex];
+ AddItems1.Insert(@event.NewIndex, foo);
+ return Task.CompletedTask;
+ }
+
+ private Task OnUpdateItems1(SortableEvent @event)
+ {
+ var oldIndex = @event.OldIndex;
+ var newIndex = @event.NewIndex;
+ var item = AddItems1[oldIndex];
+ AddItems1.RemoveAt(oldIndex);
+ AddItems1.Insert(newIndex, item);
+ return Task.CompletedTask;
+ }
+
+ private Task OnRemoveItems1(SortableEvent @event)
+ {
+ AddItems1.RemoveAt(@event.OldIndex);
+ return Task.CompletedTask;
+ }
+
+ private Task OnAddItems2(SortableEvent @event)
+ {
+ var foo = @event.FromId == "sl01"
+ ? AddItems1[@event.OldIndex]
+ : AddItems3[@event.OldIndex];
+ AddItems2.Insert(@event.NewIndex, foo);
+ return Task.CompletedTask;
+ }
+
+ private Task OnUpdateItems2(SortableEvent @event)
+ {
+ var oldIndex = @event.OldIndex;
+ var newIndex = @event.NewIndex;
+ var item = AddItems2[oldIndex];
+ AddItems2.RemoveAt(oldIndex);
+ AddItems2.Insert(newIndex, item);
+ return Task.CompletedTask;
+ }
+
+ private Task OnRemoveItems2(SortableEvent @event)
+ {
+ AddItems2.RemoveAt(@event.OldIndex);
+ return Task.CompletedTask;
+ }
+
+ private Task OnAddItems3(SortableEvent @event)
+ {
+ var foo = @event.FromId == "sl01"
+ ? AddItems1[@event.OldIndex]
+ : AddItems2[@event.OldIndex];
+ AddItems3.Insert(@event.NewIndex, foo);
+ return Task.CompletedTask;
+ }
+
+ private Task OnUpdateItems3(SortableEvent @event)
+ {
+ var oldIndex = @event.OldIndex;
+ var newIndex = @event.NewIndex;
+ var item = AddItems3[oldIndex];
+ AddItems3.RemoveAt(oldIndex);
+ AddItems3.Insert(newIndex, item);
+ return Task.CompletedTask;
+ }
+
+ private Task OnRemoveItems3(SortableEvent @event)
+ {
+ AddItems3.RemoveAt(@event.OldIndex);
return Task.CompletedTask;
}
}
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 4c2669f6c80..0088af5d40c 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6747,7 +6747,9 @@
"SortableListClassLi2": "The default style of drag element clones is sortable-ghost and can be customized through GhostClass",
"SortableListClassLi3": "Drag elements to swap items. Default style sortable-swap-highlight can be customized by SwapClass",
"SortableListSwapTitle": "Swap",
- "SortableListSwapIntro": "By setting the Swap parameter of SortableListOption, the drag item and the target item are swapped."
+ "SortableListSwapIntro": "By setting the Swap parameter of SortableListOption, the drag item and the target item are swapped.",
+ "SortableListOnAddTitle": "Multiple SortableList",
+ "SortableListOnAddIntro": "Get the SortableList to which the dragged item belongs by setting the FromId parameter of the SortableEvent. In this example, the elements in the three areas can be dragged arbitrarily"
},
"BootstrapBlazor.Server.Components.Samples.WinBoxes": {
"WinBoxTitle": "WinBox",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index ba11813b0ca..9c7641d80bc 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6747,7 +6747,9 @@
"SortableListClassLi2": "拖动元素克隆项默认样式 sortable-ghost 可通过 GhostClass 自定义",
"SortableListClassLi3": "拖动元素交换想项默认样式 sortable-swap-highlight 可通过 SwapClass 自定义",
"SortableListSwapTitle": "交换",
- "SortableListSwapIntro": "通过设置 SortableListOption 参数 Swap 设置拖拽项与目标项目交换"
+ "SortableListSwapIntro": "通过设置 SortableListOption 参数 Swap 设置拖拽项与目标项目交换",
+ "SortableListOnAddTitle": "多区域拖动",
+ "SortableListOnAddIntro": "通过设置 SortableEvent 参数 FromId 获得拖动项所属 SortableList。本示例中三个区域内元素可以任意拖动"
},
"BootstrapBlazor.Server.Components.Samples.WinBoxes": {
"WinBoxTitle": "WinBox 窗口组件",