hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drag drop

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-12 15:43:44 +01:00
parent 25185d3758
commit 06849fe684
7 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Qr.tsx
View File

@ -107,6 +107,7 @@ export default function Qr()
//const handle drag sorting
function handleSort()
{
// console.log('handleSort current:' + dragItem.current);
//duplicate items
let _itemList = [...itemList];
@ -141,12 +142,16 @@ export default function Qr()
// 231
itemList.map((item, index) =>
// console.log('handleSort itemList:');
// console.log(_itemList);
_itemList.map((item, index) =>
{
digit = 10**(3-item.ordernum);
newItemOrder += (index+1) * digit;
});
setItemOrder(newItemOrder);
// console.log('handleSort newItemOrder:' + newItemOrder);
}
function oneQrBlock()
@ -155,7 +160,7 @@ export default function Qr()
<div className='qrCodeBackFront'>
<div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
<Img pth={dog.data.qr_code} className='qrCodeImg'/>
</div>
<div className='qrCode vert frame' style={{ height : height + 'cm', width : width + 'cm', fontSize: fontSize + '%' }}>
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
@ -301,17 +306,19 @@ export default function Qr()
</div>
<div>
<div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container">
{itemList.map((item, index) => (
<div
key={index}
className="list-item"
draggable
onDragStart={(e) => (dragItem.current = index)}
onDragEnter={(e) => (dragOverItem.current = index)}
onDragStart={(e) => {dragItem.current = index; /* console.log('onDragStart index: ' + index); */}}
onDragEnter={(e) => {dragOverItem.current = index; /* console.log('onDragEnter index: ' + index); */}}
onDragEnd={handleSort}
onDragOver={(e) => e.preventDefault()}>
<h6>{item.name}</h6>
onDragOver={(e) => {e.preventDefault(); /* console.log('onDragEnter index: ' + index); */}}
>
<li>{item.name}</li>
</div>
))}
</div>