Angular DragDrop - how to reorder items

问题

THE SITUATION:

I have an app that make use of angular-dragdrop to move items between three separate list.

The drag and drop is working fine. But i also need to reorder the items inside the same list.

I see in the documentation that is possible to retrive the index also on the onDrop, but i don't know how. If i will be able to retrive the index - that is the position where the item is left in the new array - then i would be able to make the reordering

THE CODE:

        <ul class="thumbnails">
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list1' data-jqyoui-options="optionsList1" jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list1" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list2' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list2])'}"  jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list2" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list2" jqyoui-draggable="{index: {{$index}},animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list3' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list3])'}"  jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list3" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list3" jqyoui-draggable="{index: {{$index}},animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>

        </ul>

THE PLUNKER:

http://plnkr.co/edit/YiAylkMCX9TAGyyhwO1m?p=preview

THE QUESTION:

How can re-order items inside a list, using angular-dragdrop?

Thank you very much!

回答1:

You need to add additional directives in order to make sure the sorting option is enabled in the list.

data-drop="true" jqyoui-droppable="{index: {{$index}}}"

Here is the working demo: http://plnkr.co/edit/N0z6ud?p=preview

来源：https://stackoverflow.com/questions/27799766/angular-dragdrop-how-to-reorder-items

标签

javascript

angularjs

drag-and-drop