Drag drop event to get new order of cards.

[Phil]

Hi 

I have implemented the card UI and have the drag and drop working using the example script

$(document).ready( function () { $("#list").kendoSortable({ filter: ".k-card", cursor: "move", placeholder: function (element) {return element.clone().css("opacity", 0.1);}, hint: function (element) {return element.clone().css("width", element.width()).removeClass("k-state-selected");}});});

I want to be able to save the new order if the user drags and drops and item.

Is there an event to know when a drag and drop action has occurred.

Then I can loop through a class in javascript and grab the order from the ids or a data attribute to re-order the items.

Many thanks

[Tsvetomir]

Hi Phil,

The Sortable widget exposes the change event that can be used to track when the item has been dropped. We have an example that demonstrates how to persist the order of the items of the Sortable widget:

https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/persist-order-in-localstorage

The same exact approach can be replicated in an ASP.NET Core environment.

 

Kind regards,
Tsvetomir
Progress Telerik

[James]

I also need this solution however the link seems to no longer work. Can you help?

[Viktor Tachev]

The article discussed above was moved to the Knowledge Base section of the documentation:

https://docs.telerik.com/kendo-ui/knowledge-base/persist-order-in-localstorage

 

[Phil]

That is exactly what I was looking for thank you.

[Phil]

I have another question related to this.

My cards have a scroll, clicking and dragging by default doesn't scroll. 

Is there any built in method/way to allow for vertical scrolling when clicking and dragging a card. 

Or would I need to add some custom jquery that does something like.

If mouse clicked and cursor near the top/bottom of screen scroll?
Remove styles to stop text highlighting etc.

Thanks

[Tsvetomir]

Hi Phil,

In order to scroll during a reorder of the items, you should set the AutoScroll property to true:

https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/configuration/autoscroll

 

Regards,
Tsvetomir
Progress Telerik