我正在尝试在我的 Angular 14 应用程序中实现拖放功能，其中有嵌套的部分和子部分。我想向上或向下移动每个部分，并且子部分将在部分之间移动。该部分移动得很好，并且该小节也正在移入其自己的部分，但问题是当我尝试将小节从一个部分移动到另一个部分时，但它并没有将一个部分移动到另一个部分。下面是我的代码，你能帮我解决问题吗？
HTML
<div cdkDropListGroup>
<div cdkDropList [cdkDropListData]="demoData" (cdkDropListDropped)="dropSection($event)" class="section-list">
<div *ngFor="let section of demoData; let i = index" class="section" cdkDrag>
<h2>{{ section.title }}</h2>
<div cdkDropList [id]="'sec'+i" [cdkDropListData]="section.subsections" class="subsection-list"
(cdkDropListDropped)="dropSubsection($event, section)">
<div *ngFor="let subsection of section.subsections" class="subsection-item" cdkDrag>
<div *ngIf="subsection.type === 'lecture'">{{ subsection.lecture?.title }}</div>
<div *ngIf="subsection.type === 'assignment'">{{ subsection.assignment?.title }}</div>
</div>
</div>
</div>
</div>
</div>
TS
dropSubsection(event: CdkDragDrop<any[]>, section: any) {
console.log('Event:', event);
console.log('Section:', section);
console.log('Previous Container ID:', event.previousContainer.id);
console.log('Current Container ID:', event.container.id);
if (event.previousContainer === event.container) {
console.log('Moving within the same container');
moveItemInArray(section.subsections, event.previousIndex, event.currentIndex);
} else {
console.log('Moving to a different container');
const previousSection = this.demoData.find((sec) => sec.subsections === event.previousContainer.data);
if (previousSection) {
console.log('Previous Section:', previousSection);
transferArrayItem(previousSection.subsections, section.subsections, event.previousIndex, event.currentIndex);
} else {
console.error('Previous section not found');
}
}
}
数据结构：
demoData = [
{
id: '614ea6e9-ff17-4794-a751-47e27124ff21',
course: '3d285c13-0dc5-4e03-954d-5d5cfb244b07',
title: 'Section 2',
position: 0,
duration: 0,
subsections: [
{
id: '57f58b19-4ce7-4381-873f-85d4175b4839',
type: 'lecture',
position: 1,
lecture: {
id: 'e66eb256-6f6a-43bc-b652-0720c172f4c7',
video_url: null,
date_created: '2024-07-17T09:38:23.995000Z',
date_updated: '2024-07-17T09:44:22.790109Z',
chain_id: 'd4ad01e2-aec1-4a76-ba07-a10690865ab8',
title: 'Article 1',
video: null,
transcoded_video: null,
transcoded_info: {},
video_info: {},
article:
'### Overview\n\n* The descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing P\n',
type: 'Article',
position: 0,
preview: false,
published: false,
source: null,
current_version: null,
section: '614ea6e9-ff17-4794-a751-47e27124ff21',
},
section: '614ea6e9-ff17-4794-a751-47e27124ff21',
date_created: '2024-07-17T09:38:25.379276Z',
date_updated: '2024-07-17T09:38:25.379292Z',
},
{
id: 'b33968c5-3606-4196-a1d4-fe15e5c596cb',
type: 'assignment',
position: 1,
assignment: {
id: 'a120ee88-ea44-42d2-b240-8e7ab4d4d501',
date_created: '2024-07-17T09:44:55.050000Z',
date_updated: '2024-07-17T09:45:07.033183Z',
chain_id: 'bb8862af-0732-4afb-9197-dd5624c13ca8',
title: 'Assignments 1',
source: null,
current_version: null,
lecture: null,
section: '614ea6e9-ff17-4794-a751-47e27124ff21',
questions: [
{
id: '87883251-de9a-4c73-8cf6-45fafefacc22',
question: 'Question 1',
date_created: '2024-07-17T09:45:07.870466Z',
date_updated: '2024-07-17T09:45:07.870482Z',
chain_id: 'a42b0d0e-0735-4128-8bb3-006e64047b66',
expected: null,
source: null,
current_version: null,
assignment: 'a120ee88-ea44-42d2-b240-8e7ab4d4d501',
},
{
id: 'd1bfca3b-4d53-4bd8-97ba-d7b30cc04e85',
question: 'Question 2',
date_created: '2024-07-17T09:45:08.217948Z',
date_updated: '2024-07-17T09:45:08.217964Z',
chain_id: 'd9054b3b-3683-49cf-8fe9-168f1896b6ec',
expected: null,
source: null,
current_version: null,
assignment: 'a120ee88-ea44-42d2-b240-8e7ab4d4d501',
},
],
},
section: '614ea6e9-ff17-4794-a751-47e27124ff21',
date_created: '2024-07-17T09:44:55.654222Z',
date_updated: '2024-07-17T09:44:56.943395Z',
},
],
date_created: '2024-07-17T09:37:18.210964Z',
date_updated: '2024-07-17T09:37:18.210981Z',
source: null,
article_count: 0,
quiz_count: 0,
total: 0,
video_count: 0,
},
{
id: '2fedd3a8-2286-4219-91e4-057b416b6b4d',
course: '3d285c13-0dc5-4e03-954d-5d5cfb244b07',
title: 'Section 3',
position: 0,
duration: 0,
subsections: [
{
id: 'fb7308b7-5a4f-414c-add3-2a236d4a6165',
type: 'lecture',
position: 1,
lecture: {
id: '0b15d0c8-581e-4c64-b5f6-c1176ab1d27e',
video_url: null,
date_created: '2024-07-17T09:47:29.032000Z',
date_updated: '2024-07-17T09:48:06.639444Z',
chain_id: '539dbebf-8040-4906-987e-33eb97c12f50',
title: 'Article 11',
video: null,
transcoded_video: null,
transcoded_info: {},
video_info: {},
article:
'### Overview\n\n* The descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing PThe descriptions below will be available to the public on your Course Landing P\n',
type: 'Article',
position: 0,
preview: false,
published: false,
source: null,
current_version: null,
section: '2fedd3a8-2286-4219-91e4-057b416b6b4d',
},
section: '2fedd3a8-2286-4219-91e4-057b416b6b4d',
date_created: '2024-07-17T09:47:30.610005Z',
date_updated: '2024-07-17T09:47:30.610022Z',
},
],
date_created: '2024-07-17T09:46:22.365769Z',
date_updated: '2024-07-17T09:46:52.524447Z',
source: null,
article_count: 0,
quiz_count: 0,
total: 0,
video_count: 0,
},
];[![enter image description here][1]][1]
如此处所述：
如果您有未知数量的连接下拉列表，您可以使用 cdkDropListGroup 指令自动设置连接。请注意，在组下添加的任何新 cdkDropList 将自动连接到所有其他列表。
<div cdkDropListGroup>
<!-- All lists in here will be connected. -->
<div cdkDropList *ngFor="let list of lists"></div>
</div>
所以，在 HTML 中，只需将这一行
<div cdkDropListGroup>
<div cdkDropList [cdkDropListData]="demoData" (cdkDropListDropped)="dropSection($event)" class="section-list">
<div cdkDropListGroup>
<div *ngFor="let section of demoData; let i = index" class="section" cdkDrag>
...
...
...
</div>
</div>
</div>
我用您的代码创建了一个 STACKBLITZ 来演示它。在示例中，我只注意该小节没有从一个部分移动到另一个部分问题。
希望对你有帮助:)