How do I implement Dragula.js for multiple containers for my Laravel app?

Question

My question has to do with implementing the dragula library into my laravel app.

I have got dragula to work, but it only works on one 'team' object. I'm trying to create a loop where each team object will accept the nametag div. I've put the {{ $teamvalue->id }} in the id in order to create a unique id for each object, but this only lets the last team object that was generated be interacted with.

<div class="nameroll" id="nameroll">
    @foreach($names as $key => $value)
        <div class="nametag" draggable="true">
            <p>{{ $value->name }}</p>
        </div>
    @endforeach
</div>

<div class="modroll">
        @foreach($mods as $key => $value)
                @foreach($modteams as $key => $teamvalue)
                    @if($teamvalue->mod_id === $value->id)
                        <div class="col-md-4">
                            <div class="title">
                                <h1>{{ $value->mod_intent }}</h1>
                                <h1>{{ $teamvalue->modteam_description }}</h1>
                            </div>
                                <div class="team" id="team{{ $teamvalue->id }}">
                                </div>
                        </div>
                    @endif
                @endforeach
        @endforeach
</div>

I then tried this in combination with putting a {{ $teamvalue->id }} in the js code.

<script type="text/javascript">
        @foreach($modteams as $key => $teamvalue)
            dragula([document.getElementById('nameroll'), document.getElementById('team{{ $teamvalue->id }}')], {
                copy: function (el, source) {
                    return source === document.getElementById('nameroll')
                },
                accepts: function (el, target) {
                    return target !== document.getElementById('nameroll')
                }
            });
        @endforeach
</script>

But because this creates multiple versions of the same code, they conflict and none of the team objects can be interacted with.

I just want to know how to create a loop so that the js code will allow dragula to work properly with each team object, so I can drag a nametag to each one and it'll stay there.

Thanks!

Edit: Clarification The div Nameroll holds a collection of Users (Nametag). The div Modroll holds a collection of Teams (Team).

I want to be able to drag a 'Nametag' object to any of the 'Team' Objects and have it be stored there. Currently, this works, but with only the last 'team' object in the collection. I've deduced that the js function for Dragula only fires off for the last collection as I've passed a value ( $teamvalue->id) and only the last id in the group exists in the function.

Answer 1

I think you can get rid of the foreach in the javascript. Try using the draggable="true" ondragstart="myFunction(event)" for the div class='team' and wrap the drag logic in a function.

<div class="team" id="team{{ $teamvalue->id }}" draggable="true" ondragstart="dragMe('{{$teamValue}}')">
</div>

When the div is dragged, The dragMe function would be called where laravel would convert the $teamValue to json so you can use directly in the javascript.

<script type="text/javascript">
        function dragMe(teamValue){
            dragula([document.getElementById('nameroll'), document.getElementById('team'+teamValue.id)], {
                copy: function (el, source) {
                    return source === document.getElementById('nameroll')
                },
                accepts: function (el, target) {
                    return target !== document.getElementById('nameroll')
                }
            });
        }
</script>