KendoUI connects to the transition

Question

Is there a way to associate a draggable KendoUI element that will be added to the sorted KendoUI list as an example with jQueryUI here: http://jqueryui.com/draggable/#sortable . I hit my head for the day with this and become mean ridiculous. Should I switch to jQueryUI?

Answer 1

You checked the KendoUI Sortable widget . In fact, it is quite easy to use.

If these are your HTML list items:

<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 here: http://jsfiddle.net/OnaBai/gN3jV/

With this initialization, by default your draggable element looks like the original one (the same CSS style), but you can change it by specifying the hint handler:

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

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

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

And you can also create a placeholder (where you want to delete) by specifying a handler that adds a class to the element or even 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"); }, }); 

Modified example here: http://jsfiddle.net/OnaBai/gN3jV/2/

Answer 2

There is no way to do this in the Kendo UI settings. Telerik says they have no plans to do this and there are many excuses for why they are not going to do this.

However, using some JavaScript, there is a way around this. If you make both lists sortable, you can filter out “draggable” items so that they don't change positions.

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

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

The only drawback is that the draggable element disappears until you place it in the sortable area.