javascript - Dragula を使用して行を空のテーブルにドラッグします

Question

Dragula (実際には angular-dragula を使用) を使用して、あるテーブルから別のテーブルに行をドラッグしようとしています。両方のテーブルに行がある場合は問題ありませんが、対象のテーブルが空になる場合があります。空のテーブルでドロップできるようにするにはどうすればよいですか?

Answer 1

テーブルが小さすぎるのではないでしょうか？を変更してみてくださいmin-height。

---

テーブルに何もないときにプレースホルダー行を挿入します http://plnkr.co/edit/0TBXXZOBAKnGxHig3xzD?p=preview

Answer 2

angular2の力を使って解決しました。配列 (モデル) が空の場合は、dragula コンテナーとして div を追加します。それ以外の場合は、配列を保持するコンテナーを表示します。クラスドロップバッグには「min-height:50px」があります。

    <div *ngIf="models.length > 0">
        <div
        *ngFor="let model of models" 
        [dragula]='"third-bag"'
        [dragulaModel]='models'
        class="dropbag">
            <div class="col-xs-12 center-content">
                <img [src]="model.imageThumb" alt="NA">
            </div>
        </div>
    </div>
    <div *ngIf="models.length <= 0">
        <div
        [dragula]='"third-bag"'
        [dragulaModel]='models'
        class="dropbag">
            <div class="col-xs-12 center-content">
                <img src="" alt="No Content">
            </div>
        </div>
    </div>