gpt4 book ai didi

jquery-ui - 重新排序 angularfire 支持列表的项目,拖放样式

转载 作者:行者123 更新时间:2023-12-04 15:44:38 24 4
gpt4 key购买 nike

我正在构建一个 angularjs/firebase 应用程序,取消 angularfire 绑定(bind)(v0.5.0)。

我有一个项目列表,显示在带有 ng-repeat 的表中在 <tr> ,像这样:

<table>                               
<tbody>
<tr ng-repeat="(index, item) in items">
<td>
<input type="checkbox" ng-model="item.done">
</td>
<td>
<input type="text" ng-model="item.text" ng-focus="onItemFocus(index)" ng-blur="onItemBlur(index)">
</td>
<td>
<button type="button" ng-click="remove(index)">&times;</button>
</td>
</tr>
</tbody>
</table>

并且在这个项目列表上有一个 angularfire 3 路数据绑定(bind),例如:
$scope.ref = new Firebase('...');
$scope.remote = $firebase($scope.ref);
$scope.remote.$child("items").$bind($scope, "items");

这一切正常,但现在我正在尝试添加通过拖放重新排序项目的可能性。

我设法使用 jquery-ui 设置拖放 UI(本质上调用 $("tbody").sortable() ),但我的问题是将它绑定(bind)到 Angular 模型。有一个 number of questions关于这一点(使用 great jsfiddles ),但在我的情况下,angularfire 3 方式绑定(bind)似乎把它搞砸了。

我想我需要使用 firebase priorities使用 angularfire 的 orderByPriority并可能在 sortable callbacks 之一中处理它但我很难弄清楚我应该如何做到这一点......并且找不到任何关于它的文档。

有没有人做过类似的事情,你能分享一些关于如何设置的建议吗?

最佳答案

我很久以前在寻找相同的解决方案时看到了您的帖子。这是我整理的一些东西:

function onDropComplete(dropIndex, item) {
if (!item.isNew){
var dragIndex = $scope.fireData.indexOf(item);
item.priority = dropIndex;
$scope.fireData.$save(dragIndex);
if (dragIndex > dropIndex){
while ($scope.fireData[dropIndex] && dropIndex !== dragIndex ){
$scope.fireData[dropIndex].priority = dropIndex+1;
$scope.fireData.$save(dropIndex);
dropIndex++;
}
} else if(dragIndex < dropIndex){
while ($scope.fireData[dropIndex] && dropIndex !== dragIndex ){
$scope.fireData[dropIndex].priority = dropIndex-1;
$scope.fireData.$save(dropIndex);
dropIndex--;
}
}
} else if (item.isNew){
item = angular.copy(item);
item.isNew = false;
item.priority = dropIndex;
$scope.fireData.$add(item);
while ($scope.fireData[dropIndex]){
$scope.fireData[dropIndex].priority = dropIndex+1;
$scope.fireData.$save(dropIndex);
dropIndex++;
}
}

}

在这里,我获取列表中已有的项目,并在放置时调整项目的优先级属性,具体取决于拖动的项目是在放置区域上方还是下方。此外,如果将新拖动项目添加到列表中,它将添加到拖放的索引处,并且下面的所有项目都将被提升 1 优先级。这取决于您的列表是否按 var sync = $firebase(ref.orderByChild('priority')); 排序。 ,并且您将使用 ngDraggable。
以下是一些 HTML 示例:
<tr ng-repeat="obj in fireData" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
<td draggable="true" ng-drag="true" ng-drag-data="obj">
<span class="glyphicon glyphicon-move"></span><div class="drag-name">{{obj.name}}</div>
</td>
<td>{{obj.name}}</td>
<td>{{obj.type}}</td>
<td><input type="checkbox" ng-change="saveChanges(obj)" ng-model="obj.completed"></td>
<td>
<div class="" ng-click="deleteItemFromList(obj)">
<span class="glyphicon glyphicon-remove"></span>
</div>
</td>
</tr>

关于jquery-ui - 重新排序 angularfire 支持列表的项目,拖放样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20859017/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com