Monday, 6 June 2016

UI-Sortable directive not works for the drag while sorting between the elements on the first drag or first click using jquery 2.0.0 and Angular js - Resolved

In this article we are going to see a bug, which is present in the jquery,because of that it affects the Angular ui-sortable directive.now let we see about the sorting between the elements by dragging using angular js, To do this we need following references.

In this sample we take two different kind of sorting elements, one with static element, another with dynamic elements i.e adding elements at runtime using angular jsCode:

<divstyle="float: left; margin: 20px">

<h3>

static element</h3>

<ului-sortable="sortoptions"class="well"style="width: 400px">

<listyle=""class="well li">LG</li>

<listyle=""class="well li">Samsung</li>

<listyle=""class="well li">Videocon</li>

<listyle=""class="well li">Onida</li>

</ul>

</div>

<divstyle="float: left; width: 400px; margin: 20px">

<h3>

dynamic element</h3>

<ulid="sortid"ui-sortable="sortoptions"class="well">

<liclass="well alterli"ng-repeat="item in Items">{{item.name}}</li>

</ul>

</div>

Output:

Above dynamic element tag not able to drag and sort on first attempt, because of jquery 2.0.0

From the elements, both can be sort using dragging but there is a one issue with the second element, the second rendered elements can't able to drag on the first attempt, but it can drag and sort in second attempt, this issue only occurs in Jquery 2.0.0 when elements are rendered dynamically using ng-repeat. But it works correctly when using Jquery less than or above 2.0.0, This is working correctly for static declared elements Now we are going to see how to fix this issue, to drag the dynamically rendered elements in the first attempt for jquery 2.0.0 versionWhy this issue occurs in dynamically rendered elements ? When adding the directive ui-sortable to the root tag, that particular element is rendered first,before the rendering of the child elements, because of this behavior drag is fails on the first attempt, it cant able to recognize the event. on the second attempt it success for the dynamic added elements.How to fix this issue ?For dynamic rendered elements, adding a new directive along with ui-sortable directive, add the directive init-sort which i mention before , it will take care remaining things,now your elements are drag and sortable on the first attempt itself.