Sortable panel with scrollbar doesn't scroll

[Achilles]

Hi,
I'm designing a dashboard using Sortable panels using your example as a reference. I have a news widget where I don't have control over the height of the content which comes over rss. Hence I've added a scrollbar.
This works fine, except that when I try to scroll using the slider, it has a drag & drop effect on the whole widget. The arrows at the top & bottom are however working.

You can see the effect by adding the height & overflow properties to the css ~line 237 as

/* BLOGS & NEWS */
#blogs div,
#news div {
    padding: 0 20px 20px;
    overflow: scroll;
    height: 300px;
}

in the example
http://demos.telerik.com/kendo-ui/web/sortable/sortable-panels.html

Is there a way to get the scrollbar to work ?

Regards

Achilles

[Alexander Valchev]

Hello Achilles,

The issue which you described is a known one. I was able to reproduce it in Firefox and IE but not in Chrome. The problem comes from the fact that different browsers throw the events in a different way. Since the scrollbar is not a DOM element we cannot ignore it or determine that the user is currently trying to scroll.

As a possible solution I can suggest you to use drag handlers. In this way the user will be able to interact with the scrollbar without any issues.
In case of the example you can make the header a drag handler.

$("#main-content").kendoSortable({
    filter: ">div",
    cursor: "move",
    connectWith: "#sidebar",
    placeholder: placeholder,
    hint: hint,
    handler: "h3"
});

Regards,
Alexander Valchev
Telerik