import gradio as gr

img_html = '''
<img ondragstart="imgChange(event)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4n_urpJ9XpwOTdzBVbGvactwHrPagYQrTJPYjxfxLGkSyu7nJZVqRVGAeohnPgKMrnKE&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4n_urpJ9XpwOTdzBVbGvactwHrPagYQrTJPYjxfxLGkSyu7nJZVqRVGAeohnPgKMrnKE&usqp=CAU">
'''

img_js = '''
function imgFunc(x){
    let script = document.createElement('script');    
    script.innerHTML = "function imgChange(event){ event.dataTransfer.setData('DownloadURL', 'image/png:test.png:https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')}"
    document.head.appendChild(script);
}
'''

with gr.Blocks() as app:
    with gr.Row():
        gr.HTML(img_html)
    app.load(_js = img_js)
    
app.launch(debug=True, 
            share=False, 
            height=768,
            )