0

作为如何在 Angular 中从一个 ui-sortable 移动到另一个 ui-sortable的后续行动？

如果我有 2 个连接的列表，其中一个列表是空的，我该如何真正放入它？再次查看http://minitrello.meteor.com，他甚至在空列表中也创建了一个占位符。我如何复制它，以便什么时候

list1 = []; list2 = ['A','B','C']

我真的可以上list1吗？小提琴http://jsfiddle.net/hKYWr/894/

编辑： http://jsfiddle.net/hKYWr/897/上的清洁器小提琴

4

3 回答 3

2

如果您的 List 是空的，那么您还需要创建一个空的 Li

我在每个列表中添加了一个列表

<li ng-show="list1.length==0">&nbsp;</li>

<li ng-show="list2.length==0">&nbsp;</li>

下面是工作演示

Demo

模板代码：

<div ng:controller="controller">
    <div style="float:left; margin:5px;">
        <h3>list1</h3>
    <ul ui:sortable="sortableOptions" class="connectedList" ng:model="list1">
        <li ng:repeat="item in list1" class="item">{{item}}</li>
        <li ng-show="list1.length==0">&nbsp;</li>
    </ul>
    </div>
    <div style="float:left;margin:5px;">
    <h3>list2<h3>
    <ul ui:sortable="sortableOptions" class="connectedList" ng:model="list2">
        <li ng:repeat="item in list2" class="item">{{item}}</li>
         <li ng-show="list2.length==0">&nbsp;</li>
    </ul>
    </div>
        <div style="clear:both;"></div>
    <hr />
    <div>list1: {{list1 | json}}</div>
    <div>list2: {{list2 | json}}</div>
</div>
于 2013-09-24T08:53:57.360 回答
1

这是对已接受答案的类似“hacky”解决方案，但您也可以在列表中添加一些填充（顶部/底部）来处理此问题。

例如

<ul style="padding-top:20px; padding-bottom: 20px;">

请参阅此处的小提琴以获取证据！

这表明问题在于空列表没有提供“目标”可供放置。

设置最小高度也同样有效。

于 2015-03-31T17:48:36.290 回答
1

我使用的解决方案只是将 min-height 设置为连接列表

.connectedList {
  min-height: 10px
}

http://jsfiddle.net/hKYWr/2367/

于 2016-01-10T12:12:41.363 回答