dnd wip
This commit is contained in:
1 parent
e04b12726d
commit
1c0738ec84
9 files changed
+155
-42
No files matched your search
@@ -1,8 +1,40 @@
|
||||
<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
|
||||
<div x-sortable-handle x-sortable-item class="bg-white p-4 cursor-grab flex flex-row flex justify-between">
|
||||
<div class="basis-9/20 text-right">{{ $record->home->name }}</div>
|
||||
<div class="basis-1/20 text-center">-</div>
|
||||
<div class="basis-9/20">{{ $record->away->name }}</div>
|
||||
<div class="basis-1/20"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" /></div>
|
||||
<li class="bg-white w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item"
|
||||
id={{ $record->id }}
|
||||
x-on:dragstart.self="
|
||||
dragging = true;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('text/plain', event.target.id);
|
||||
"
|
||||
x-on:drop.prevent="
|
||||
const id = event.dataTransfer.getData('text/plain');
|
||||
const target = event.target.closest('ul');
|
||||
const element = document.getElementById(id);
|
||||
target.appendChild(element);
|
||||
"
|
||||
draggable="true">
|
||||
|
||||
<div class="w-6 flex-none mx-auto my-auto">
|
||||
@if ($record->country->iso2)
|
||||
<x-icon name="flag-country-{{ $record->country->iso2 }}" class="h5 w-5" />
|
||||
@else
|
||||
<x-icon name="{{ $record->country->icon }}" class="h5 w-5" />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center space-y-1">
|
||||
<div class="flex justify-center text-primary-500">{{ $record->starttime }}</div>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<div class="text-right font-bold">{{ $record->home->name }}</div>
|
||||
<div class="w-6 text-center">-</div>
|
||||
<div class="text-left font-bold">{{ $record->away->name }}</div>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<div>{{ $record->country?->name }}</div>
|
||||
<div>{{ $record->competition_group->name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-6 flex-none my-auto">
|
||||
<x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
|
||||
</div>
|
||||
</li>
|
||||
@@ -1,12 +1,42 @@
|
||||
<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
|
||||
<div x-sortable-handle x-sortable-item class="bg-white p-2 cursor-grab grid grid-cols-10 grid-rows-2 gap-1">
|
||||
<div class="row-span-2 text-left"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out"
|
||||
class="my-auto" /></div>
|
||||
<div class="col-span-4 text-right">{{ $record->home }}</div>
|
||||
<div class="text-center">-</div>
|
||||
<div class="col-span-4">{{ $record->away }}</div>
|
||||
<div><x-flag-country-at class="h5 w-5" /></div>
|
||||
<div class="col-span-8">{{ $record->country_betsapi?->name }}
|
||||
{{ $record->group }}</div>
|
||||
<li class="w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item" id={{ $record->event_id }}
|
||||
x-on:dragstart.self="
|
||||
dragging = true;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('text/plain', event.target.id);
|
||||
"
|
||||
x-on:drop.prevent="
|
||||
const id = event.dataTransfer.getData('text/plain');
|
||||
const target = event.target.closest('ul');
|
||||
const element = document.getElementById(id);
|
||||
target.appendChild(element);
|
||||
"
|
||||
draggable="true">
|
||||
|
||||
|
||||
|
||||
<div class="w-6 flex-none my-auto">
|
||||
<x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center space-y-1">
|
||||
<div class="flex justify-center text-primary-500">
|
||||
{{ $record->starttime }}
|
||||
</div>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<div class="text-right font-bold">{{ $record->home }}</div>
|
||||
<div class="w-6 text-center">-</div>
|
||||
<div class="text-left font-bold">{{ $record->away }}</div>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<div>{{ $record->country_betsapi?->name }}</div>
|
||||
<div>{{ $record->group }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-6 flex-none mx-auto my-auto">
|
||||
@if ($record->group_cc)
|
||||
<x-icon name="flag-country-{{ $record->group_cc }}" class="h5 w-5" />
|
||||
@endif
|
||||
</div>
|
||||
</li>
|
||||
Reference in new issue
Block a user