Every drag and drop library I have used in the past support a handle option, meaning that the drag of an item only occurs if the the user has clicked on a specific child element of the item. Normally this option's value is a selector.
<kendo-sortable [data]="tracksData" [handle]="#headerBar">
<template let-trackData="item">
<track [tempo]="trackData.tempo"></track>
</template>
</kendo-sortable>
Where #headerBar is the selector of an indirect or direct child element of TrackComponent.
I don't see how this can be achieved with the current API, but perhaps I'm wrong.
Here are 2 examples of an API for a handle option:
- jQuery UI
- dragula
Github ticket: https://github.com/telerik/kendo-angular2/issues/57#issuecomment-254558547
Please provide an automatic scroll of the page while dragging an item off the visible screen boundaries. Thank you.
https://stackblitz.com/edit/angular-7it8f2?file=app/app.component.ts
Hi,
We are using the Kendo UI sortable component to allow drag & drop of tabs. Currently there is no way to control the position of the dragged element in relation to the cursor (It's always on the top left corner)
It would be nice if you could add an option to configure this, so that the cursor could be in the middle/bottom of the dragged element.
See the attached image.
Thanks in advance,
Shai.
It would be a good future to have the additional customization option similar to the Drag and Drop utility component:
https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/hint/
Hi team,
It will be a nice addition if an event is added to the Sortable component that fires when the component data is updated.
It would be useful if sortable items can be dragged from one zone container to another, without having to drag them over the second container's items first.
Similar to the desired behavior, can be seen in this jQuery demo: https://dojo.telerik.com/uZOgOPAd/2