我正在使用 Kendo UI Angular 2 库中的可排序组件来创建自定义组件列表，用户可以根据需要拖放以重新排列。默认情况下，可以通过单击项目中的任意位置来拖动可排序的项目。我的问题是：我们可以像在经典剑道 UI 中那样指定句柄吗？我希望用户仅在使用项目的标题而不是正文时拖动项目。
我在文档中找不到任何内容，我希望如果有人这样做，他们可以为我指明正确的方向。
谢谢。
【问题讨论】：
标签： kendo-ui kendo-ui-angular2
如果无法访问 TypeScript 源代码（只能访问转译的 JavaScript），这很难说，但根据我的快速检查，答案是否定的。它不支持像 Kendo UI JavaScript 版本那样可以指定句柄选择器的选项。
如果您有一个句柄元素，根据文档，您应该将 draggable="true" 属性添加到 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+ 包装器可用。它的选项中确实支持句柄等。
【讨论】：
let-whateverIwant="item"
我知道这个最初的问题被问到已经有好几年了，但在撰写本文时，Kendo 仍然不支持原生的“句柄”机制。但是，有一种方法可以实现“句柄”功能，我将在这里写下它，希望将来有人会觉得这很有帮助。 注意我不认为这是正确的解决方案，因为我认为 Kendo 的 API 应该有这个功能。
当我们开始在小部件上拖动时，我们只想在鼠标悬停在有效句柄上时进行拖动。
在你的组件代码中定义一个标志。
/** whether we should allow dragging **/
allowDrag: boolean = false;
在kendo-sortable 元素上监听dragStart
<kendo-sortable (dragStart)="onDragStart($event)">
当标志为真时停止默认dragStart event
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
当您的鼠标悬停在句柄元素上时，启用该标志。当鼠标离开元素时，禁用标志。
<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>
【讨论】：
(touchstart)="allowDrag = false"设置为所有不是句柄的东西不是很麻烦吗？如果您在dragStart 上将allowDrag 设置为false，则可以跳过此步骤？
dragStart 中可能有更好的方法来做到这一点，就像你说的那样 - 也许通过传递被拖动的项目并评估它是否应该是可拖动的（基于属性/类/属性）。我不能总是在dragStart 上禁用拖动，因为有些东西应该是可拖动的。我知道还有更多方法可以实现这一点......这对我来说很有效，并且在我的代码中并不是很麻烦