Question

我的问题与将拉图库实现到我的laravel应用程序有关。

我有拖拉机工作，但它只适用于一个'团队'对象。我正在尝试创建一个循环，其中每个团队对象将接受名称标签div。我已将{{ $teamvalue->id }}放在id中，以便为每个对象创建唯一的ID，但这只会让生成的最后一个团队对象与之交互。

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

然后我尝试将这个与{{ $teamvalue->id }}放在js代码中。

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

但是因为这会创建相同代码的多个版本，所以它们会发生冲突，并且没有任何团队对象可以与之交互。

我只是想知道如何创建一个循环，以便js代码允许dragula与每个团队对象一起正常工作，所以我可以将一个名称标签拖到每个，它会留在那里。

谢谢！

编辑：澄清 div Nameroll包含一组Users（Nametag）。 div Modroll拥有一组团队（团队）。

我希望能够将'Nametag'对象拖动到任何'Team'对象并将其存储在那里。目前，这是有效的，但只有集合中的最后一个“团队”对象。我推断出Dragula的js函数只会触发最后一个集合，因为我传递了一个值（$ teamvalue-＆gt; id），并且该函数中只存在该组中的最后一个id。

Answer 1

我认为你可以摆脱javascript中的foreach。尝试将draggable="true" ondragstart="myFunction(event)"用于div class='team'并将drag逻辑包装在函数中。

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

当拖动div时，将调用dragMe函数，其中laravel会将$teamValue转换为json，以便您可以直接在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>

如何为我的Laravel应用程序为多个容器实现Dragula.js？

1 个答案: