sortable handle with nested elements

[Mac]

 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?

[Alexander Valchev]

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:

• http://docs.telerik.com/kendo-ui/api/web/sortable#configuration-ignore

var sortable = $(".sortable").kendoSortable({
    handler: ".handle",
    ignore: ".fa-arrow-v"
});

Regards,
Alexander Valchev
Telerik

 

 

[Mac]

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;
}