Kendo UI Angular 2+可排序拖动手柄

Question

我正在使用Kendo UI Angular 2库中的可排序组件来创建自定义组件列表，用户可以拖放这些组件以根据需要重新排列。默认情况下，可以通过单击项目中的任何位置来拖动可排序项目。我的问题是：我们可以像经典的Kendo UI一样指定句柄吗？我希望用户仅在使用项目的标题而不是正文时拖动项目。

我在文档中找不到任何内容，我希望如果有人这样做，他们可以指出我正确的方向。

感谢。

Answer 1

无法访问TypeScript源代码（只能访问已编译的JavaScript），这很难说，但根据我的快速检查，答案是否定的。它不支持像Kendo UI JavaScript版本那样可以指定句柄选择器的选项。

如果你有一个句柄元素，根据文档，你应该添加draggable =＆＃34; true＆＃34;属性在Sortable模板中的元素。

请参阅http://www.telerik.com/kendo-angular-ui/components/sortable/#toc-known-limitations

<kendo-sortable [data]="items">
  <ng-template let-item="item">
    <button draggable="true">
      {{item}}
    </button>
  </ng-template>
</kendo-sortable>

我对这个Kendo Angular组件的体验并不是那么好。我有自己的未解决的问题。它似乎在狭窄的范围之外运作良好。

目前，至少在我的项目中，我们将使用Dragula。它有一个Angular2 +包装器。它确实支持句柄等选项。

https://github.com/valor-software/ng2-dragula

Answer 2

我知道问这个原始问题已经有好几年了，但是截至撰写本文时，Kendo仍不原生支持“句柄”机制。但是，有一种实现“句柄”功能的方法，我将在此处编写该方法，以希望将来有人能对此有所帮助。 注意，我认为这不是 right 解决方案，因为我认为Kendo的API应该具有此功能。

使用鼠标

防止拖动开始

当我们开始在小部件上拖动时，我们只希望在鼠标悬停在有效手柄上时进行拖动。

在组件代码中定义一个标志。

/** whether we should allow dragging **/
allowDrag: boolean = false;

在dragStart元素上收听kendo-sortable

<kendo-sortable (dragStart)="onDragStart($event)">

在标记为true时停止默认的dragStart event

/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
    if (!this.allowDrag) {
        e.preventDefault();
        return;
    }
}

切换鼠标悬停和鼠标离开

当鼠标悬停在handle元素上时，启用该标志。当鼠标离开元素时，请禁用该标志。

<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>

整合触摸屏用户

上述方法的原理仅依赖于监听句柄上的mouseover和mouseleave事件，而忽略其他所有内容。对于移动设备-有点棘手，因为没有鼠标位置专门定义用户是否处于拖动位置。因此，我们必须添加一个侦听器来处理元素以及不想拖拽的所有其他非处理元素。这种方法也可以用于鼠标单击，尽管我认为仅将其附加到手柄元素上是更好的方法。

注意：我尚未对这种方法进行全面测试，它可能并不适合所有情况，并且可能不适用于所有用户。

添加touchstart事件

在您看来，听着触摸手柄

<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
    (mouseleave)="allowDrag = false" class="drag-handle"></div>

还包括触摸所有不是手柄的东西

<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>