This is a migrated thread and some comments may be shown as answers.

sortable handle with nested elements

2 Answers 313 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Mac
Top achievements
Rank 2
Mac asked on 12 May 2014, 10:38 AM
 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 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 May 2014, 09:15 AM
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!
 
0
Mac
Top achievements
Rank 2
answered on 14 May 2014, 01:21 PM
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;
}

Tags
Sortable
Asked by
Mac
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Mac
Top achievements
Rank 2
Share this question
or