Sorting doesn't work for the first time.. After page refresh, works fine
Tanisha27 opened this issue · 4 comments
I am using ui-sortable in Meteor web app. Loading dynamic data in the horizontal grid and using ui-sortable to sort the grid columns. But its not working properly. But, after I refresh the page, it starts working properly until I hard reload the page.
Code:
js file
this.sortableOptions = {
handle: '> .move-handle',
scroll: true,
'ui-floating': 'auto',
cursor: "pointer",
containment: "parent"
}
html file
<ul ng-model="editEvaluation.evaluation.sections" ui-sortable="editEvaluation.sortableOptions" class="sortable-list agile-list" >
<li ng-repeat="section in editEvaluation.evaluation.sections track by $index" class="sections-list" ng-class="{'selected': section.selected}">
<div class="move-handle">
<i class="fa fa-bars"></i>
</div>
<div class="section-detail" ng-click="editEvaluation.selectSection($index)">
//section
</div>
</li>
</ul>
Do you get any error in your browser console?
I would also suggest to avoid using ng-class
(and any other DOM manipulations) directly on the <li>
.
You can probably just wrap the <li>
's content in an other <div>
and apply the class there.
Same thing here,
i have 3 different sortable elements, i only have the pb on one.
If i force JQuery sortable to reload, it works
maybe a wrong initialization of the directive on angular apply ?
do not have any errors on logs
Try removing class="sections-list"
from the <li>