drag event not working?
Im facing a weird issue, which i have no idea why its happening.
Here the issue, the MinimalDraggable is not working, even tho its identical to manual script demo.
What is going on here??
<body>
<script src="/src/index.tsx" type="module"></script>
<div>
<h1 class="title">Hello World!</h1>
<p id="currentTime"></p>
<div id="draggableBox" draggable="true">Drag me</div>
</div>
-- // this one is working ??
<script>
const draggableBox = document.getElementById("draggableBox");
draggableBox.addEventListener("dragstart", function (e) {
console.log("Drag started");
});
</script>
</body>
// not working ??
const Home = () => {
const MinimalDraggable = () => {
const handleDragStart = (e: DragEvent) => {
console.log("Drag started");
};
return (
<div
draggable
onDragEnter={handleDragStart}
onDragStart={handleDragStart}
>
Drag me
</div>
);
};
return (
<div>
<MinimalDraggable />
</div>
);
}; <body>
<script src="/src/index.tsx" type="module"></script>
<div>
<h1 class="title">Hello World!</h1>
<p id="currentTime"></p>
<div id="draggableBox" draggable="true">Drag me</div>
</div>
-- // this one is working ??
<script>
const draggableBox = document.getElementById("draggableBox");
draggableBox.addEventListener("dragstart", function (e) {
console.log("Drag started");
});
</script>
</body>
// not working ??
const Home = () => {
const MinimalDraggable = () => {
const handleDragStart = (e: DragEvent) => {
console.log("Drag started");
};
return (
<div
draggable
onDragEnter={handleDragStart}
onDragStart={handleDragStart}
>
Drag me
</div>
);
};
return (
<div>
<MinimalDraggable />
</div>
);
};Here the issue, the MinimalDraggable is not working, even tho its identical to manual script demo.
What is going on here??
