S
SolidJS•3mo ago
mrVinicius

drag event not working?

Im facing a weird issue, which i have no idea why its happening. 
    <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??
4 Replies
zulu
zulu•3mo ago
try 
 <div
    draggable="true"`
 <div
    draggable="true"`
mrVinicius
mrViniciusOP•3mo ago
it worked, still weird, a standalone prop by itself shoud mean true
zulu
zulu•3mo ago
https://github.com/solidjs/solid/issues/1101
GitHub
Boolean attributes · Issue #1101 · solidjs/solid
Questions: How should JSX attributes foo and foo={true} behave for an HTML element, as in &lt;div foo&gt; or &lt;div foo={true}&gt;? Should the behavior differ for components and/or spreads? Curren...
mrVinicius
mrViniciusOP•3mo ago
ah, thanks, at least there is a source explaning what is going on

Did you find this page helpful?