gpt4 book ai didi

jquery-ui - 如何在 Angular 中从一种 ui-sortable 迁移到另一种 ui-sortable?

转载 作者:行者123 更新时间:2023-12-02 21:49:15 25 4
gpt4 key购买 nike

有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。

如何在两个可排序列表之间移动项目?我更新了 jsfiddle 以显示示例 http://jsfiddle.net/hKYWr/893/

如何从 list1(其中包含 ['one','two','third','four',' Five','six'] 中拖动) 进入 list2 (其中有 ['A','B','C','D','E','F'])?例如,我想将 'one' 拖到 list2 中,从而得到 ['one','A','B','C','D','E', 'F'] 并将 list1 保留为 ['two','third','four',' Five','six']

Chris Ramon 的 http://minitrello.meteor.com 就是一个活生生的例子(但没有使用 Angular)每个都是一个单独的可排序列表,但我可以将项目从一个列表移动到另一个列表。

用例?克里斯的 minitrello 是一个不错的,尽管我是在将人们分组之后。我将呈现 3 个列表:未分配、A 组、B 组。用户可以将未分配的人员拖动到组 A 或组 B,或在组之间移动,等等。

最佳答案

您可以使用 ui-sortable 指令连接两个需要使用“connectWith”属性的列表:

Working Demo

<div ng:controller="controller">
<ul ui:sortable="sortableOptions" ng:model="list" class="group">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<br />
<ul ui:sortable="sortableOptions" ng:model="list2" class="group">
<li ng:repeat="item in list2" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
<div ng:repeat="item in list2">{{item}}</div>
</div>

Controller 代码:

myapp.controller('controller', function ($scope) {
$scope.list = ["1", "2", "3", "4", "5", "6"];

$scope.list2 = ["7", "8", "9"];

$scope.sortableOptions = {
update: function(e, ui) {
},
receive: function(e, ui) {

},
connectWith: ".group",
axis: 'y'
};

});

关于jquery-ui - 如何在 Angular 中从一种 ui-sortable 迁移到另一种 ui-sortable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18975556/

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