Kendo UI Angular 2+ Sortable drag handle - kendo-ui

Question

I am using the sortable component from the Kendo UI Angular 2 library to create a list of custom components which the user can drag and drop to rearrange as they need. By default, the sortable's items can be dragged by clicking anywhere within the item. My question is: can we specify a handle like we would in the classic Kendo UI? I want the user to drag the item only when using the header of the item, not the body.
I could not find anything in the documentation and I was hoping that if anyone had done it they can point me in the right direction.
Thanks.

Answer 1

Without access to the TypeScript source code (only have access to the transpiled JavaScript), it's hard to tell, but based on my quick examination the answer is no. It doesn't support options like the Kendo UI JavaScript version does where you can specify a handle selector.
If you have a handle element, according to the docs, you're supposed to add the draggable="true" attribute to your element in the Sortable's template.
See 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>
My experience with this Kendo Angular component is it's not that great. I have my own open issue with it. It doesn't seem to work well outside a narrow scope.
For now, at least in my project, we'll be using Dragula. There is an Angular2+ wrapper for it available. It does support handles and such in its options.
https://github.com/valor-software/ng2-dragula

Answer 2

I know it has been years since this original question was asked, but as of this writing, Kendo still does not support a "handle" mechanism natively. There is, however, a way to implement the "handle" feature, which I will write here in hopes that someone in the future may find this helpful. Note I don't believe this is the right solution, because I believe Kendo's API should have this feature.
Using a Mouse
Prevent Drag Start
When we start to drag on the widget, we only want dragging to occur if our mouse is over a valid handle.
Define a flag in your component's code.
/** whether we should allow dragging **/
allowDrag: boolean = false;
Listen for dragStart on the kendo-sortable element
<kendo-sortable (dragStart)="onDragStart($event)">
Stop the default dragStart event when the flag is true
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
Toggle on mouseover and mouseleave
When your mouse is over the handle element, enable the flag. When your mouse leaves the element, disable the flag.
<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>
Incorporating Touchscreen Users
The philosophy of the above approach relies on only listening for the mouseover and mouseleave events on the handle, and ignoring everything else. For mobile - it's a bit trickier, because there isn't a mouse-position that specifically defines whether a user in position to make a drag. So, we have to add a listener to handle elements, as well as to all other non-handle elements we don't want dragging on. This approach could have been employed for mouse clicks as well, though I believe only attaching to the handle elements is the better approach.
Note: I haven't fully tested this approach yet, and it may not be suitable in all conditions, and may not work as expected for all users.
Add the touchstart Event
In your view, listen for touching the handle
<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
(mouseleave)="allowDrag = false" class="drag-handle"></div>
Also including touching all things that aren't handles
<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>