draggable Make code-generated div draggable

[FunkiePhil]

Hi all,

I'm using Papaparse to parse a .csv file and generate some "cards" displaying some information (eventually it will be students name and school options). I want to be able to then drag the "cards" and drop them into "containers" (the school classes for next year).

The card generation works but I can't seem to make them draggable. There is a "list-item" class for all the "cards". The class is recognised as far as the css is concerned but the dragging doesn't work :

 

see Draggable.create('.list-item'); on line 49

 

Maybe it's not possible to make a class draggable...  

 

I attached a .csv file to demonstrate the card generation.

 

Thanks for your help

 

Philippe

Eleves.csv

See the Pen gbpdWYv by funkiephil (@funkiephil) on CodePen.

[Rodrigo]

Hi,

 

This is mostly about making your code more asynchronous. That is after the file has been loaded and the elements are added to the DOM, only then create the Draggable instances. So most likely it should be here:

button.addEventListener("click", (event) => {
  console.log("click", Date.now())
  document.getElementById("warning-text").style.display = "none";
  if (fileInput.value != "") {
    Papa.parse(fileInput.files[0], {
      complete: function (result) {
        data = result.data;
        renderData(data);
        // After adding the elements to the DOM make them Draggable
        Draggable.create(target, {
          // ...
        });
      }
    });
  };
});

Right now you are creating the Draggable instances before the button is clicked, so most likely that is why is not working.

 

Hopefully this helps

Happy Tweening!