72 lines
3.0 KiB
PHP
72 lines
3.0 KiB
PHP
<!-- 1. Der Alpine-Wrapper (Komplett clean, ohne 'dropzones' oder 'sources') -->
|
|
<div x-data="{
|
|
init() {
|
|
this.$nextTick(() => {
|
|
// Findet alle 22 Container (1 Quelle + 21 Ziele) im HTML
|
|
const allContainers = this.$el.querySelectorAll('.drag-container');
|
|
|
|
if (allContainers.length === 0) return;
|
|
|
|
// Dragula initialisieren
|
|
const drake = dragula(Array.from(allContainers), {
|
|
revertOnSpill: true,
|
|
copy: false
|
|
});
|
|
|
|
// Drop-Event verarbeiten
|
|
drake.on('drop', (el, target, source) => {
|
|
const playerId = el.getAttribute('data-item-id');
|
|
const targetZone = target.getAttribute('data-container-id');
|
|
const sourceZone = source.getAttribute('data-container-id');
|
|
|
|
console.log('Spieler ' + playerId + ' von ' + sourceZone + ' nach ' + targetZone);
|
|
|
|
|
|
{{-- If the item lands in the "trash" zone, remove it entirely
|
|
if (targetZone === 'trash') {
|
|
el.remove();
|
|
}
|
|
--}}
|
|
});
|
|
});
|
|
}
|
|
}" class="grid grid-cols-12 gap-1">
|
|
<div class="col-span-5 drag-container flex flex-row flex-wrap gap-2" data-container-id="source-1">
|
|
@foreach ($players as $player)
|
|
<x-filament::button class="h-12" size="sm" color="gray" data-item-id="{{ $player['player_id'] }}">
|
|
⚽️ {{ $player['player_name'] }}
|
|
</x-filament::button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="col-span-6 bg-cover bg-center" style="background-image:url({{ asset('svg/soccerfield.svg') }})">
|
|
<div class="grid grid-cols-5 grid-rows-7 gap-4 justify-between items-center border">
|
|
{{-- first row --}}
|
|
<div></div>
|
|
<div></div>
|
|
<div class="drag-container drag-box" data-container-id="zone-1">
|
|
<div class="font-black text-center">SW</div>
|
|
</div>
|
|
<div></div>
|
|
<div></div>
|
|
{{-- second row --}}
|
|
<div class="drag-container drag-box" data-container-id="zone-2">
|
|
<div class="font-black text-black/30 text-center">DR</div>
|
|
</div>
|
|
<div class="drag-container drag-box" data-container-id="zone-3">
|
|
<div class="font-black text-black/30 text-center">DC</div>
|
|
</div>
|
|
<div class="drag-container drag-box" data-container-id="zone-4">
|
|
<div class="font-black text-black/30 text-center">DC</div>
|
|
</div>
|
|
<div class="drag-container drag-box" data-container-id="zone-5">
|
|
<div class="font-black text-black/30 text-center">DC</div>
|
|
</div>
|
|
<div class="drag-container drag-box" data-container-id="zone-6">
|
|
<div class="font-black text-black/30 text-center">DL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>Actions</div>
|
|
</div>
|