drag and drop

gistfile1.txt

import streamlit as st

button = st.html("<span id='button' draggable='true' style='border: 1px solid red;'>hello world</span>")


with st.container(key="board") as cont:
    left, right = st.columns(2)
    with left:
        st.markdown('<div data-column="left" class="column-marker"/>', unsafe_allow_html=True)
        st.write("left")

    with right:
        st.markdown('<div data-column="right" class="column-marker"/>', unsafe_allow_html=True)
        st.write("right")

draggable = st.components.v2.component(
    name="hello_world",
    js="""
export default function(component) {
    const { setTriggerValue } = component;
    const button = document.getElementById("button");
    const zeno = document.querySelector('.st-key-board');
    const columns = zeno.querySelectorAll('.stColumn:has(.column-marker)');

    zeno.ondragover = (e) => {
        e.preventDefault();
        setTriggerValue('over', "zeno");
    };

    for (const column of columns) {
        const marker = column.querySelector('[data-column]');
        console.log(marker);
        column.ondrop = (e) => {
            e.preventDefault();
            setTriggerValue('drop', marker.dataset.column);
        }
    };
    console.log("ramen");
}
    
    """
)

x = draggable()