Sortable work in similar was as TreeView drag and drop

[Marcin]

Is it possible to configure the sortable to make it work in the similar was as TreeView drag and drop?

I would like not to move element during dragging, but only on drop.

I would also like to prevent some drop targets dynamically based on source element.

[Konstantin Dikov]

Hi Marcin,

You can return empty "hint" for the Sortable widget if you do not want to display the dragged item:

• https://dojo.telerik.com/EDItadOt/2

As for conditionally preventing the drop event, you could handle the "end" event of the Sortable and use the preventDefault method conditionally:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/events/end

If I have misunderstood the requirement, please do not hesitate to get back to us.


Regards,
Konstantin Dikov
Progress Telerik

[Marcin]

Hello

I want to display hint, I don't want to to display placeholder, and don't want to remove original item from list on drag start. I would like to move it only when I accept dragging. And during dragging I would like to show forbidden drop icon near to hint.

[Marcin]

So even ListBox drag and drop demo looks more, that I like to see.

On moving I want prevent dynamically, based on dragging element places where item can be dropped and add visual for that.

[Georgi]

Hi Marcin,

Internally the listbox uses a Kendo Draggable which is initialized as follows:

                that._draggable = new kendo.ui.Draggable(that.wrapper, {
                    filter: draggable.filter ? draggable.filter : DEFAULT_FILTER,
                    hint: kendo.isFunction(hint) ? hint : $(hint),
                    dragstart: proxy(that._dragstart, that),
                    dragcancel: proxy(that._clear, that),
                    drag: proxy(that._drag, that),
                    dragend: proxy(that._dragend, that)
                });

//default filter

  var DEFAULT_FILTER = "ul.k-reset.k-list>li.k-item";

// default hint

    function defaultHint(element) {
        return element.clone()
            .removeClass(DRAGGEDCLASS)
            .removeClass(FOCUSED_CLASS)
            .addClass(kendo.format("{0} {1} {2}", SELECTED_STATE_CLASS, RESET, DRAG_CLUE_CLASS))
            .width(element.width());
    }

Therefore you could use the above configuration in and create a Kendo Sortable.

Below you will find a small sample which demonstrates how to use the above configuration within a standard ul list:

• http://dojo.telerik.com/OJOHeCiT

Regards,
Georgi
Progress Telerik