javascript - Return the index of a div inside ng-repeat to use in jQuery ui droppable -

i have ng-repeat looping through bunch of different fries.

<div class="normal-fries">     <div ng-repeat="fry in normalfries">       <div class="normal-fry">         <h3>{{ fry.name }}</h3>         <p>energy: {{ fry.energy }}</p>         <p>protein: {{ fry.protein }}</p>       </div>     </div>   </div> 

i have created draggable method normal-fry

$(".normal-fry").draggable({     addclasses: false,   }); 

i'm trying return index of fry (div) dropped can access information fry within jquery.

$(".normal-plate").droppable({     accept: ".normal-fry",     drop:function(event, ui){       console.log($(this).index());     }   }); 

however can't work out how index of dropped div. i've tried,

$(this).index(): 

and

$((ui.draggable).index()); 

and variations of two. can't work out.

i grateful suggestions.

thanks.

you expose $index property inside view onto data- attribute , access through jquery in drop handler.

<div ng-repeat="fry in normalfries">   <div class="normal-fry" data-idx="$index">     <h3>{{ fry.name }}</h3>     <p>energy: {{ fry.energy }}</p>     <p>protein: {{ fry.protein }}</p>   </div> </div> 

but, recommend go angular way , disregard jquery as can. that's not jquery doesn't have use cases, mixing , matching angular not 1 of them (imho).

• angular-dragdrop
• angular-drag-and-drop-lists
• ngdraggable