Web File Drop API

0 favourites
  • 4 posts
From the Asset Store
Source code, art assets and music tracks to remake this game
  • Has anyone worked with the HTMl Drag and drop API inside of construct?

    https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

    It seems like preventing the default behavior of the drop is not working correctly.

    here is a small test project i was using? to just get the drop handler to fire, but it would never hit the debugger statement.

    https://drive.google.com/open?id=1nXfMhuqY_Pb89yvY4jFqJh51kwoJU5r7

    Tagged:

  • It's because the element you have registered the handlers to has a height of 0, so it's impossible to drag n drop onto. Is there a reason for using "fb-root"? I'm not even sure whats it's supposed to be for. If you just want the entire page then document.body is ideal.

    There's an easier way to bind events to elements than what you've used BTW. HTMLElements have the method addEventListener which allows you to attach a function to an event. It's simple and clean. Typically adding an attribute with a snippet of script like you do there is only used in HTML files to make it clearer that an event is bound to that particular element, but as your manipulating the element in JS it makes sense to use addEventListener instead. Here's an example of using it to listen to "click" events from an element.

    function onclick (e) {
    	console.log("something clicked!");
    }
    
    const element = document.getElementById("myelement");
    
    element.addEventListener("click", onclick);
    

    Note that you pass in a reference to the onclick function, not a string, and that the name of the event isn't prefixed with "on".

    Here's a lightly modified version of your script which should work.

    function ondrop(ev) {
    	//prevents file from being opened
    	ev.preventDefault();
    	console.log('drop', ev);
    }
    
    function ondragover(ev) {
    	 ev.preventDefault();
    // 	 ev.dataTransfer.dropEffect = "move";
    	 console.log('drag', ev);
    }
    
    runOnStartup(async runtime =>
    {
    	const element= document.body;
    	element.addEventListener("drop", ondrop);
    	element.addEventListener("dragover", ondragover);
    });
    
    
  • Oh nice, yeah I just picked any element fb-root was just there. Thanks for the detailed explanation 👍. It's really helpful

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Some times ago i created this plugin

    https://www.construct.net/en/make-games/addons/316/drag-drop-files

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)