KendoUI connect draggable to sortable

kendo-draggable, kendo-ui

Solution

Did you check KendoUI Sortable widget. It is actually pretty easy to use.

If this is your HTML list elements:

<ul id="sortable">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
</ul>

You just need to do:

$("#sortable").kendoSortable({
});

Check it here : http://jsfiddle.net/OnaBai/gN3jV/

With this default initialization you have the dragged element look like the original one (same CSS style) but you can change it by defining a `hint` handler:

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    }
});

Where I add to the dragged element the CSS class `ob-hint`.

See the previous example modified: http://jsfiddle.net/OnaBai/gN3jV/1/

And you can also style the placeholder (where to drop) by defining a handler that adds a class to the element or even a text.

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    },
    placeholder:function(element) {
        return element.clone().addClass("ob-placeholder").text("drop it here");
    },
});

The modified example here : http://jsfiddle.net/OnaBai/gN3jV/2/

Problem

Is there any way that I can connect KendoUI draggable item to be added to KendoUI sortable list as the example with jQueryUI here: http://jqueryui.com/draggable/#sortable. I'm hitting my head for a day with this and its becoming medium funny. Should I switch to jQueryUI?

Original source