角的DragDrop - 如何重新排列物品 [英] Angular DragDrop - how to reorder items
问题描述
局势:
我有一个应用程序,利用角的DragDrop 移动之间的项目三个独立的名单。
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.
我看这是可能也retrive指数上onDrop的文件中,但我不知道怎么办。
如果我将能够以检索索引 - 这正是该项目是新的数组中留下的位置 - 那么我将能够使重新排序
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
总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>
总PLUNKER:
http://plnkr.co/edit/YiAylkMCX9TAGyyhwO1m?p=$p$ PVIEW
问题:
如何重新排序列表里面的物品,使用角的DragDrop?
How can re-order items inside a list, using angular-dragdrop?
非常感谢你!
推荐答案
您需要,以确保排序选项在列表中已启用添加额外的指令。
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}}}"
下面是工作演示: http://plnkr.co/edit/N0z6ud p = preVIEW
这篇关于角的DragDrop - 如何重新排列物品的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!