Dash drag and drop functionality

Dash Python
1

Hi,
I am trying to have drag and drop functionality in my dash app. As a first step, I am trying to add listeners for drop, dragover, dragenter events to a Div element using Javascript. Below is my test code. I expected to see a message getting displayed in the Div element with id “log”, but nothing! Also, it doesn’t seem to me that the listeners are being properly added. For example, I see a listener for a “click” event (and not a “drop” event) getting added to the Div element with id “drop-zone” (see uploaded screenshot). Also I don’t see listeners for the “dragover” and “dragenter” events. Finally there is a “Violation” appearing in the Chrome console (which may not be the real issue, but I’m not sure). Any advice?

Thanks
Anirban

Code
main.py
from dash import Dash, html, Input, Output, State

# Create small example app
app = Dash()

app.layout = html.Div([
    html.Div("card1", draggable=True),
    html.Div("card2", draggable=True),
    html.Div("Drop it here!", id="drop-zone"),
    html.Div(id="log"),
])

if __name__ == "__main__":
    app.run_server()
assets/event_handlers.js
document.addEventListener('DOMContentLoaded', function () {
    var dropzone = document.getElementById('drop-zone');
    alert("Adding listeners ")//to "+dropzone.id

    if (dropzone){
        dropzone.addEventListener('drop', handleDrop);

        dropzone.addEventListener('dragover', function (event) {
            event.preventDefault();
        });

        dropzone.addEventListener('dragenter', function (event) {
            event.preventDefault();
        });
    }
});

function handleDrop(event){
    event.preventDefault();
    document.getElementById("log").textContent = "Sth dropped on "+event.target.id;
}

Screenshot of Chrome

chrome
chrome3691×2019 411 KB

2

Hey,
I think the correct syntax is draggable=‘true’ , also try this for checking if the element is loaded:

const checkElement = async selector => {
  while ( document.querySelector(selector) === null) {
      await new Promise( resolve =>  requestAnimationFrame(resolve) )
  }
  return document.querySelector(selector);
};


checkElement('#drop-zone').then((dropzone) =>{

  console.log(dropzone)
  if (dropzone){
    console.log("Adding listeners ")
      dropzone.addEventListener('drop', handleDrop);

      dropzone.addEventListener('dragover', function (event) {
        
          event.preventDefault();
      });

      dropzone.addEventListener('dragenter', function (event) {
          
          event.preventDefault();
      });
  }
});

function handleDrop(event){
  event.preventDefault();
  document.getElementById("log").textContent = "Sth dropped on "+event.target.id;
  console.log("handled drop")
}