Drag handles

[Mike]

I have a TreeView (with draggable nodes) inside a draggable container to allow users to re-order not just elements within a certain hierarchy, but also to re-order the hierarchies themselves.

I've gotten this to work on PC's using jQuery UI + Kendo UI, but I'm trying to apply this same functionality to touch devices. The problem is that the draggable event for the container is fired when trying to drag just a draggable TreeView node. I'd tried playing with the filter to implement a drag handle to no avail.

// jQuery UI Sortable

$(".sortable").sortable({revert : true, handle : $(".cont-move", this), axis : "y"});

 

// Kendo UI Draggable

$(".kendo-tree").kendoTreeView({

    template         : "#=item.text#"

,   checkboxTemplate : kendo.template($("#treeview-checkbox-template").html())

,   dataSource       : [

        {id : 1, text : "Parent", expanded : true, items : [

            {id : 2, text : "Child 1"}

        ,   {id : 3, text : "Child 2"}

        ,   {id : 4, text : "Child 3"}

        ,   {id : 5, text : "Child 4"}

        ,   {id : 6, text : "Child 5"}

        ]

    }]

,   dragAndDrop      : true

,   select           : function(event) {

        var $item = $(event.node);

    }

});

cont-move div is the draggable handle (works in jQuery UI, not Kendo UI)

<ul class="sortable">

    <li class="ui-state-default">

        <div class="cont-chek"><input type="checkbox" /><div class="cont-move" style="width:24px;height:24px;background:transparent url('../../common/dhxcommon/imgs/arrow_nsew.png') no-repeat center;cursor:pointer;"></div></div>

        <div class="cont-qstn"><div class="kendo-tree"></div></div>

    </li>

    <li class="ui-state-default">

        <div class="cont-chek"><input type="checkbox" /><div class="cont-move" style="width:24px;height:24px;background:transparent url('../../common/dhxcommon/imgs/arrow_nsew.png') no-repeat center;cursor:pointer;"></div></div>

        <div class="cont-qstn"><div class="kendo-tree"></div></div>

    </li>

</ul>

jQuery UI does include a drag handle option, but I like the look (and coding) of the Kendo UI draggable better, plus Kendo works on mouse and touch devices. Are there any plans to allow for a drag handle option for kendoDraggables? Is there a workaround I can be using?

[Petyo]

Hi,

Currently, the filter option behaves pretty much like the drag handles of jQuery UI. Is it possible for you to provide a jsFiddle sample, of your efforts with that option? We may be able to help. 

Kind regards,
Petyo
the Telerik team

[Mike]

I don't know how to embed the jsFiddle page all cool-like, but here's the link:
http://jsfiddle.net/2uJGu/1/

By default, I have the jQuery UI code enabled in order to show how it's supposed to work.

• The Parent and Child nodes are draggable/droppable
• The container for each TreeView is also draggable/droppable

[Petyo]

Hi,

The problem is that the hint is not correct. When using filter, the item is the handle itself. See the updated fiddle. 

Regards,
Petyo
the Telerik team

[Mike]

Thanks. This is close, but I think I'll wait for more updates & documentation on Drag & Drop to implement on touch devices.