JavaScript HTML5 Canvas - Drag and Drop

[WolfTech77]

Hello!

I am attempting to create an HTML5 Canvas with Drag and Drop. I got the dragging to work, but I would like to be able to drop my three objects in a box, then click a "Check" button which will show "correct" or "incorrect" depending the order in which they were dropped. I'm also using Adobe Animate. Much help is needed. Please point me in the right direction if possible.


Thank you!

 

[LTomy]

Hello WolfTech77!

I do not know how to help here, your question is relatively large. If you are comfortable with JS it does not seem too hard to do, but it for sure takes some time to actually code.
Some thoughts, I do not know if it will be useful to you?:
You can generate <input type="checkbox"></input elements for each dragged element and then link a function to the event when a check-box is checked so you can execute the verifications and display the appropriate message.

 

[Antero360]

Hello!

I am attempting to create an HTML5 Canvas with Drag and Drop. I got the dragging to work, but I would like to be able to drop my three objects in a box, then click a "Check" button which will show "correct" or "incorrect" depending the order in which they were dropped. I'm also using Adobe Animate. Much help is needed. Please point me in the right direction if possible.


Thank you!

Hey Wolf,

I do believe w3schools has exactly what you need

HTML Drag and Drop API

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Here is the code they suggest, for a simple drag n drop:


function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}