Managing several drop elements using class dynamically

Question

Managing several drop elements using class dynamically

I am facing a challenge in combining drag and drop listeners into one function to create dynamic zones with the same class. This will allow me to call a single function for uploading files. The upload function is currently working correctly, but I need assistance in making this process more dynamic within a single function.

<div id="dropZone1" class="dropZones" ></div>
<div id="dropZone2" class="dropZones" ></div>

     <script>

       var dropMedical = document.getElementById('dropZone1');
        dropMedical.addEventListener('dragover', dragOver, false);
        dropMedical.addEventListener('drop', fileSelect, false);

        var dropStatements = document.getElementById('dropZone2');
        dropStatements.addEventListener('dragover', dragOver, false);
        dropStatements.addEventListener('drop', fileSelect, false);

    </script>

javascript

Answer 1

Answer №1

Perhaps a solution similar to this could work?

listener(zone) {
  zone.addEventListener('dragover', handleDragOver, false);
  zone.addEventListener('drop', handleFileSelect, false);
}

var dropZone1 = document.getElementById('dropArea1');
listener(dropZone1);

var dropZone2 = document.getElementById('dropArea2');
listener(dropZone2);

Answer 2

Perhaps a solution similar to this could work?

listener(zone) {
  zone.addEventListener('dragover', handleDragOver, false);
  zone.addEventListener('drop', handleFileSelect, false);
}

var dropZone1 = document.getElementById('dropArea1');
listener(dropZone1);

var dropZone2 = document.getElementById('dropArea2');
listener(dropZone2);

Managing several drop elements using class dynamically

Answer №1

Similar questions

The integration of express and cors() is malfunctioning

The bootpag event seems to trigger multiple times upon execution following an Ajax function call

Ways to confirm the presence of strings within an array?

Angular does not seem to be identifying the project name as a valid property

Modify button behavior on click after the initial press

Collaborate and pass around SQL connections among different modules

NPM encountered difficulties in resolving the dependency tree

What steps should I take to turn off caching specifically for directory listings?

Retrieve the content of a file and convert it into JSON or GeoJSON format

Positioning Avatar component at the center of Card component

Undefined values in Javascript arrays

Retrieve error messages from API while utilizing Next-auth

How can data be shared between two functional child components in a React application?

Show and hide components in React by simply clicking on them

Obtain the response header variable within a Shiny application

Troubleshooting Problem with Padding in ion-content for Ionic Angular

When using Node.js, res.render may encounter issues, but res.send typically functions properly

Ways to receive notification during the user's selection of an option by hovering over it

The error message "UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty" typically occurs

React video recording not displaying in the video element