KendoUI connect draggable to sortable

Question

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?

Answer 1

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/

Answer 2

There is no way to do this in the Kendo UI controls. Telerik says they have no plans to do this and have lots of excuses why they are not going to do it.

However, using some JavaScript, there is a way around it. If you make both lists sortable, you can filter the 'draggable' items, so they do not change positions.

$("#draggable").kendoSortable({
   connectWith: "#sortable",    
   start: function () {
     $("#draggable div").each(function () {
       $(this).removeClass("sortable");
     });
   }
});

This fiddle shows this: http://jsfiddle.net/kgjertsen/r4xmLevq/

The only drawback is the 'draggable' item disappears until you drop it on the sortable area.