sortable handle with nested elements

3 posts, 0 answers
  1. Mac
    Mac avatar
    36 posts
    Member since:
    Nov 2006

    Posted 12 May 2014 Link to this post

     using I have approx the following sortable markup using a font icon for the drag icon

    <div class="sortable">
       <div class="row">
          <div class="handle"><i class="fa fa-arrow-v"></i></div>
          <div>other content</div>
       </div>
    </div>

    when I setup the sortable as follows:

    var sortable = $(".sortable").kendoSortable({
                    handler: ".handle",
                });

    how can I ignore the <i> element to allow the whole div to initiate sorting?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 May 2014 Link to this post

    Hi Mac,

    If I understood correctly you would like to ignore an item inside the handler element.
    Generally speaking the best way to achieve this is to modify the mark-up:
    <div class="row">
       <div class="wrapper"><i class="fa fa-arrow-v"></i><div class="handle"></div></div>
       <div>other content</div>
    </div>

    In this way you can select the .handle as handler element and the .fa-arrow-v will not act as a handler.

    If this is not suitable for you please try using the ignore option:
    var sortable = $(".sortable").kendoSortable({
        handler: ".handle",
        ignore: ".fa-arrow-v"
    });


    Regards,
    Alexander Valchev
    Telerik
     
    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. Mac
    Mac avatar
    36 posts
    Member since:
    Nov 2006

    Posted 14 May 2014 in reply to Alexander Valchev Link to this post

    Thanks for the response Alexander,

    In the first scenario you provided, the icon is outside the handle which is not what I am after. Using absolute positioning to move the icon over the handle would again block that part of the handle from selection.

    In the second scenario, the ignore will explicitly prevent the icon from being dragged which again is not what I am after.

    I resolved this in my case by using the following css (sadly only css 3). This prevents the icon from capturing the click which passes straight through to the handler. The result is I can now drag anywhere inside the handler, including on the icon.

    .handle i {
    pointer-events:none;
    }

Back to Top