angular - 防止拖动子元素

Question

我有一个包含 4 个子元素的容器。

如果我单击任何节点元素，我想防止拖动。但是如果我从其他任何地方拖动，我想拖动图表容器。

<div class="chart-container" #wrapper cdkDrag>
    <ng-container *ngFor="let node of nodes; let i = index">
      <div
        class="box"
        [id]="node.id"
        [ngClass]="{ target: node.type === 'target' }"
        [style.top.px]="node?.uiPosition?.top || 20"
        [style.left.px]="node?.uiPosition?.left || 20"
      >
        <div class="node">
          {{ 'Node' + (i + 1) }}
        </div>
      </div>
    </ng-container>
   <div class="example-handle" cdkDragHandle></div>
</div>

.example-handle {
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 5;
}

我添加了一个 z-index 较低的 div 并添加了 cdkDragHandle ，现在我可以拖动容器了。但是有没有更好的方法来处理这个问题？

标签： angularangular-cdk-drag-drop

Answer 1

If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item. Furthermore, you can disable an entire list using the cdkDropListDisabled input on a cdkDropList or a particular handle via cdkDragHandleDisabled on cdkDragHandle.

这是医生说的。你试过了吗？