0

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.

stntmnky
  • 37
  • 1
  • 7
  • Are you sure all the objects pass the `if` condition in the `foreach`? – Norris Oduro Sep 15 '17 at 06:57
  • Yeah I'm sure. I've checked and all the objects get passed, but it seems iterating through the js script and spawning a javascript function for each instance conflicts with each other. – stntmnky Sep 18 '17 at 02:43

1 Answers1

0

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>
Norris Oduro
  • 1,019
  • 8
  • 17
  • Could you go into a bit more detail? I've tried that approach but it just makes every object draggable while the last div in the team set only accepts a nametag. – stntmnky Sep 19 '17 at 00:45
  • So you want all items to be `draggable` and accept a name tag? – Norris Oduro Sep 19 '17 at 06:50
  • So the Nametag is the only thing thats draggable, but I want each team to be able to accept a nametag. At the moment, only the last team accepts the nametag cause it iterates through the collection and the javascript function only triggers on the last item in the collection. – stntmnky Sep 19 '17 at 06:54
  • I think it is because of the duplication of the `
    `. If there are 100 items all has the same `class` which makes it only one
     – Norris Oduro Sep 19 '17 at 06:57
  • I think you should make it unique bu appending the `class="nametag{{$value->id}}"` to produce unique classes for all items – Norris Oduro Sep 19 '17 at 06:58