Sortable work in similar was as TreeView drag and drop

5 posts, 1 answers
  1. Marcin
    Marcin avatar
    195 posts
    Member since:
    Jan 2011

    Posted 27 Jul 2018 Link to this post

    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.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 31 Jul 2018 Link to this post

    Hi Marcin,

    You can return empty "hint" for the Sortable widget if you do not want to display the dragged item:
    As for conditionally preventing the drop event, you could handle the "end" event of the Sortable and use the preventDefault method conditionally:
    If I have misunderstood the requirement, please do not hesitate to get back to us.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Marcin
    Marcin avatar
    195 posts
    Member since:
    Jan 2011

    Posted 31 Jul 2018 in reply to Konstantin Dikov Link to this post

    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.

  4. Marcin
    Marcin avatar
    195 posts
    Member since:
    Jan 2011

    Posted 31 Jul 2018 Link to this post

    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.

  5. Answer
    Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 02 Aug 2018 Link to this post

    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:



    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Back to Top