One-Sided copy

[smyth64]

Hey there, First of all. I really love your work!

Maybe you can help me. I like to tell my bags, that only Bag A should copy to Bag B, but not Bag B to Bag A. Is this possible?

[RolfVeinoeSorensen]

There are multiple ways of handling a scenario like that. A very basic method could be something like this pseudo code HTML

<div class='container' [dragula]='"page-bag"'  id="content" style="min-height: 300px; border: 1px solid #7896b1;"></div>
                    <div class="list-group" [dragula]='"page-bag"' id="layouts">
                        <button type="button" class="list-group-item">Container</button>
                        <button type="button" class="list-group-item">Row</button>
                        <button type="button" class="list-group-item">Column</button>
                        <button type="button" class="list-group-item">Header</button>
                        <button type="button" class="list-group-item">Table</button>
                    </div>

And in the class something like this typescript

export class SomeComponent  {
        private dragulaService: DragulaService
    )
    {
        //setup dragNdrop for creating content
        dragulaService.setOptions('page-bag', {
            copy: true,
            copySortSource: true
        })
        //determine if drop is allowed
        dragulaService.drop.subscribe((value) => {
            this.onDrop(value);
        });
    }
    //(0 - bagname, 1 - el, 2 - target, 3 - source, 4 - sibling)
    private onDrop(value) {
        if (value[2] == null) //dragged outside any of the bags
            return;
        if (value[2].id !== "content" && value[2].id !== value[3].id) //dragged to a container that should not add the element
            value[1].remove();
    }
}

[valorkin]

@RolfVeinoeSorensen thanks for helping!

[RolfVeinoeSorensen]

Its the least I can do when you create all these awesome modules for angular 2 :-)

[valorkin]

Thanks doing my best :)

[NathanWalker]

Thanks for handling the recent issues here @valorkin !

[valorkin]

np:) you are Native Script guy now:)

[NathanWalker]

Lol yes. Will def help when I can though! Hopefully things will lighten up over next couple weeks for me :) thanks!

On Tue, May 17, 2016 at 2:12 PM Dmitriy Shekhovtsov < notifications@github.com> wrote:

np:) you are Native Script guy now:)

— You are receiving this because you commented.

Reply to this email directly or view it on GitHub https://github.com/valor-software/ng2-dragula/issues/225#issuecomment-219855545

[jesus-novologic]

Guys, getting the same example, I would like to drog one element per bag, I mean, if you try to drop an element from bag A to bag B and the Bag B already has an element, do not allow to drop the new one. thanks

[cormacrelf]

The code above would only need a couple of lines changed for that behaviour. Just write a check to see if the target el has any children.

[kenji-1996]

Just wanted to add this if its helpful to anyone if you want the 'content' bag to not hold duplicates (like I wanted) you can use this, along with binding both bags to a dragularModel of a simple array list like shown:

    public allChoices: Array<string> = ['The', 'possibilities', 'are', 'endless!'];
    public correctChoices: Array<string> = [];

    constructor(
        private dragulaService: DragulaService
    ) {
        //setup dragNdrop for creating content
        dragulaService.setOptions('page-bag', {
            copy: true,
            copySortSource: true
        });
        dragulaService.drop.subscribe((value) => {
            this.onDrop(value);
        });
    }
    private onDrop(value) {
        if(this.correctChoices.includes(value[1].id)) {
            this.correctChoices =  Array.from(new Set(this.correctChoices));
        }
        if (value[2] == null) { //dragged outside any of the bags
            return;
        }
        if (value[2].id !== "content" && value[2].id !== value[3].id) { //dragged to a container that should not add the element
            value[1].remove();
        }

and heres what it looks like HTML wise:

<nb-card-body [dragula]='"page-bag"' id="layouts" [dragulaModel]='allChoices'>
                                <div *ngFor='let text of many' [innerHtml]='text' [id]="text"></div>
                            </nb-card-body>

<nb-card-body [dragula]='"page-bag"' id="content" [dragulaModel]='correctChoices'>
                                <div *ngFor='let text of many2' [innerHtml]='text' [id]="text"></div>
                            </nb-card-body>