Угловое перетаскивание CDK - как сохранить исходное положение?

Question

Я пытаюсь перетащить библиотеки Angular / CDK.Смотрите ссылку: https://material.angular.io/cdk/drag-drop/overview

Я немного с ней прототипировал, но есть одна вещь, для которой я не могу найти решение.

Если вы посмотрите, например, список задач по ссылке, то вы увидите, что при начале перетаскивания вы теряете исходную позицию, в которой был размещен элемент.

Итак, мой вопрос:Кто-нибудь знает, как сохранить исходную позицию выделенной при начале перетаскивания элемента с помощью Angular / CDK?

Answer 1

Я тоже наткнулся на ту же проблему.В настоящее время нет прямого решения.У вас должен быть свой обходной путь.Изначально вы должны понимать, что cdk-drag-drop по умолчанию предоставляет нижеуказанные события, которые помогут вашему делу. cdk-drag-drop api

1. cdkDragStarted - это событие вызывается при начале перетаскивания элемента.
2. cdkDragReleased - это событие вызывается при отпусканииперетаскиваемый элемент.

HTML будет выглядеть следующим образом

   <div cdkDropList
          (cdkDropEntered)="entered($event)"
          [cdkDropListData]="items"
          (cdkDropListDropped)="dropped($event)">
        <div class="drop-list">
         <div class="drag-location" *ngIf="draggedItemIndex == cind"></div>
         <div class="drag-element"
             *ngFor="let childItem of items; let cind=index"
             (cdkDragStarted)="cdkDragStarted($event,childItem, cind)" 
             (cdkDragReleased)="cdkDragReleased($event, cind)"
             cdkDrag>
         </div>
        </div>
       </div>
     </div>
    </div>
   ...
  </div>
 </div>

В компоненте вы можете попробовать, как показано ниже,

function cdkDragStarted(event, childItem,cind){
   this.draggedItemIndex = cind;
}
function cdkDragReleased(event, childItem,cind){
   this.draggedItemIndex = undefined;
}

В CSS вы можете добавитьcss к этому конкретному классу "drag-location".

.drag-location{
  height: 5px;
  background-color: #4d4dff
}

Таким образом, согласно логике программы, когда вы перетаскиваете элемент, его div "drag-location" активируется, и отображается синяя линия.Таким образом, он может быть использован в качестве указания для перетаскиваемого местоположения.Это простой обходной путь.Я использовал аналогичный процесс в большем приложении, но немного по-другому.

Предупреждение: Не делайте div "drag-location" очень высоким, так как это помешает cdk-drag-drop css и разрушит базовую структуру.