Drag handles

5 posts, 0 answers
  1. Angelo
    Angelo avatar
    32 posts
    Member since:
    Nov 2011

    Posted 03 May 2012 Link to this post

    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?
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Angelo
    Angelo avatar
    32 posts
    Member since:
    Nov 2011

    Posted 08 May 2012 Link to this post

    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
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Angelo
    Angelo avatar
    32 posts
    Member since:
    Nov 2011

    Posted 08 May 2012 Link to this post

    Thanks. This is close, but I think I'll wait for more updates & documentation on Drag & Drop to implement on touch devices.
Back to Top
Kendo UI is VS 2017 Ready