drag drop

src/App.css

@@ -12,6 +12,16 @@
     justify-content: center;
 }
 
+.prevUplImg
+{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+
+
 @media print 
 {
   .noprint

src/components/Dog.tsx

@@ -39,7 +39,7 @@ const Dog = () =>
   <p>phone: {phone}</p>
   <p>pic: {picPath}</p>
   <p>qr: {qrPath}</p> */}
-  <Img pth={picPath} />
+  <Img pth={picPath} className=''/>
   <DogNameTxt name={name} email={email} phone={phone} />
   </div>
 :

src/components/Img.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
-export default function Img({pth}: {pth: string}) 
+export default function Img({pth, className}: {pth: string, className: string | undefined}) 
 {
   return (
     <div>
-      <img src={'./uploads' + pth}  />
+      <img className={className} src={'./uploads' + pth}  />
     </div>
   )
 }

src/components/PreviewUpload.tsx

@@ -75,6 +75,7 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
         onChange={handleChange}
         accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
       />
+      <div className='prevUplImg'>
       <img
         src={file}
         style={{
@@ -84,6 +85,7 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
           maxHeight: '300px',
         }}
       />
+      </div>
       {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
     </div>
   );

src/components/Profil.tsx

@@ -71,7 +71,7 @@ function Profil()
         <div className='Profil'>
             <h2>Profil</h2>
             <div>
-                {dog.data && <Img pth={dog.data.picture}/>}
+                {dog.data && <Img pth={dog.data.picture} className=''/>}
                 <Link to={'/upload'}>Bild ändern</Link>
             </div>
             <form onSubmit={submitForm}>

src/components/Qr.css

@@ -1,10 +1,17 @@
 
 img
 {
-    width: 2.4cm;
+    max-width: 300px;
+    max-height: 300px;
     background: #ffffff;
 }
 
+.qrCodeImg
+{
+    max-width: 100%;
+    max-height: 100%;
+}
+
 .qrCodeBackFront
 {
     display: flex;
@@ -52,6 +59,11 @@ img
     width: 2.4cm;
 }
 
+.beschreibung
+{
+    font-size: x-small;
+}
+
 .vert
 {
     flex-direction: row-reverse;
@@ -112,7 +124,7 @@ img
 
 .qr-input
 {
-    width: 50px;
+    width: 55px;
 }
 
 label

src/components/Qr.tsx

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