Drag and drop item between tow lint in streamlit

Using Streamlit
, ,
1

Dear sir

How to transfer an item from the first listbox to the second listbox using the mouse, implement drag and drop functionality in Streamlit.

please send the code

2

Welcome to the Streamlit community, and thanks for your question! :tada: Drag-and-drop between two listboxes (or containers) isn’t natively supported by Streamlit’s built-in widgets like st.selectbox or st.multiselect. However, you can achieve this using a custom component such as streamlit-dnd, which enables drag-and-drop reordering and moving items between containers.

Here’s a minimal example using streamlit-dnd:

import streamlit as st
from streamlit_dnd import dnd, apply_move

# Initialize session state for two lists
if "items" not in st.session_state:
    st.session_state.items = {
        "list1": ["Apple", "Banana", "Cherry"],
        "list2": ["Orange", "Grape"]
    }

# Render first container
with st.container(key="list1", border=True):
    for it in st.session_state.items["list1"]:
        with st.container(key=f"item1_{it}", border=True):
            st.write(it)

# Render second container
with st.container(key="list2", border=True):
    for it in st.session_state.items["list2"]:
        with st.container(key=f"item2_{it}", border=True):
            st.write(it)

# Enable drag-and-drop between containers
event = dnd("list1", "list2")

# Apply the move and rerun if an item was dropped
if event:
    apply_move(event, st.session_state.items)
    st.rerun()

This lets you drag items between the two containers with your mouse. For more details and advanced options, check out the streamlit-dnd forum post. If you run into issues, please share your code or a minimum reproducible example so the community can help!

Sources: