如何使用angular-ui拖動到空的連接列表？

Question

作爲後續How do I move from one ui-sortable to another in Angular?

如果我有2個連接列表，列表中的一個是空的，我怎麼居然落到了嗎？再次查看http://minitrello.meteor.com，他甚至在空列表中創建了一個佔位符。如何複製，如此，當

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

其實我可以拖放到list1？小提琴在http://jsfiddle.net/hKYWr/894/

編輯：清潔小提琴在http://jsfiddle.net/hKYWr/897/

Answer 1

如果列表爲空，則還需要創建一個空的李

我在每個List

<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> 

Answer 2

這是一個類似「哈克」的解決方案，以公認的答案，但你也可以添加一些填充（上/下），以你的列表來處理這個問題。

例如

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

看到小提琴here的證據！

這表明問題在於空列表不提供「目標」。

設置最小高度也可以。

Answer 3

我用了一個解決方案只是爲了最小高度設置爲連接列表

.connectedList { 
    min-height: 10px 
} 

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