매트 - 아코디언 간의 드래그 앤 드롭

Question

매트 - 아코디언간에 드래그 앤 드롭을 시도하고 있습니다. 문제는 아코디언이 닫혀있을 때마다 항목을 삭제할 수 없다는 것입니다. 여기

내 코드입니다

public groups: Array<any> = [ 
    { 
    name: 'Group A', 
    items: [{name: 'Item A'}, {name: 'Item B'}, {name: 'Item C'}, {name: 'Item D'}] 
    }, 
    { 
    name: 'Group B', 
    items: [{name: 'Item 1'}, {name: 'Item 2'}, {name: 'Item 3'}, {name: 'Item 4'}] 
    } 
]; 

HTML을

<mat-accordion> 
    <mat-expansion-panel *ngFor='let group of groups'> 
     <mat-expansion-panel-header> 
     {{group.name}} 
     </mat-expansion-panel-header> 
     <div *ngFor='let item of group.items' [dragula]='"first-bag"'> 
     <div>{{item.name}}</div> 
     </div> 
    </mat-expansion-panel> 
</mat-accordion> 

참고 : 나는 드래그와 같은 컨테이너에 항목을 드롭하지만 드롭 할 수 있도록하려면 드래그 앤 드롭이 잘 작동 닫힌 아코디언, 아코디언을 시작하면 아코디언이 열려 다른 아코디언이 열리고 거기에 떨어질 수 있습니다.

Answer 1

나는 또한 동일한 문제에 직면 해있다. 지금은 CSS를 사용하여 해결했습니다. dragula의 CSS 파일로 이동 - node_modules/dragula/DIST/dragula.css

.gu-mirror { 
    position: fixed !important; 
} 

당신은 당신이 당신이 직면하고있는 이상한 행동을 볼 수 없습니다이 위치를 언급됩니다. 비록 CSS 전문가는 아니지만. 이를 해결하기 위해 여백 텍스트를 조정하여 드래그 텍스트와 커서가 겹치지 않도록 할 수 있습니다. 여백을주세요.

margin: 0 0 0 100px !important;