I am working towards building a website for an AI application using Streamlit. I have implemented some amount of HTML and CSS into my Streamlit code to create CSS containers. My webpage looks like this
The HTML and CSS code for the containers is as follows:
I have passed the following code into the variable html_string which is then passed to st.markdown:
div class=“grid-container”
div class=“grid-item” 1
…
and so on till 24 boxes are created
st.markdown(html_string, True)
CSS:
.grid-container{
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 150px;
grid-row-gap:10px;
grid-column-gap:10px;
}
.grid-item{
border:1px solid black;
border-radius:.5em;
text-align: left;
color:Crimson;
}
I would like to drag and drop the image present in the navigation bar into one of the containers. There is the HTML5 drag and drop API available.
How do I incorporate Drag and drop to transfer the image into one of the containers in Streamlit??