mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-17 12:01:13 +02:00
fix drag drop
This commit is contained in:
@@ -110,12 +110,13 @@ const Assets = () => {
|
|||||||
|
|
||||||
const [isDropTarget, setIsDropTarget] = useState(false);
|
const [isDropTarget, setIsDropTarget] = useState(false);
|
||||||
const handleDragDropEvent = e => {
|
const handleDragDropEvent = e => {
|
||||||
console.log('drag event, ', e.type, e.target.dataset.dragTarget);
|
|
||||||
if (e.type === 'dragover') {
|
if (e.type === 'dragover') {
|
||||||
// required for drop to work
|
// required for drop to work
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else if (e.type === 'dragleave') {
|
} else if (e.type === 'dragleave') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
// so that individual nested elements don't trigger dragleave
|
||||||
|
if (e.currentTarget.contains(e.target)) return;
|
||||||
setIsDropTarget(false);
|
setIsDropTarget(false);
|
||||||
} else if (e.type === 'dragenter') {
|
} else if (e.type === 'dragenter') {
|
||||||
setIsDropTarget(true);
|
setIsDropTarget(true);
|
||||||
@@ -157,7 +158,6 @@ const Assets = () => {
|
|||||||
onDragLeave={handleDragDropEvent}
|
onDragLeave={handleDragDropEvent}
|
||||||
onDragOver={handleDragDropEvent}
|
onDragOver={handleDragDropEvent}
|
||||||
onDrop={handleDrop}
|
onDrop={handleDrop}
|
||||||
data-drag-target
|
|
||||||
>
|
>
|
||||||
<HStack gap={1} align="center">
|
<HStack gap={1} align="center">
|
||||||
<h1>
|
<h1>
|
||||||
@@ -179,7 +179,7 @@ const Assets = () => {
|
|||||||
<VStack gap={1} align="stretch">
|
<VStack gap={1} align="stretch">
|
||||||
<label style="background: #00000001">
|
<label style="background: #00000001">
|
||||||
<Text tag="p" align="center">
|
<Text tag="p" align="center">
|
||||||
Drop files here to upload
|
Drop files or click here to upload
|
||||||
</Text>
|
</Text>
|
||||||
<Text tag="p" appearance="secondary" align="center">
|
<Text tag="p" appearance="secondary" align="center">
|
||||||
File should be max 300KB in size
|
File should be max 300KB in size
|
||||||
|
Reference in New Issue
Block a user