I am working on a drag & drop quiz where i can sort items into two areas.
Sadly it is not working in Firefox Mobile on Android. If i touch the items nothing happens. But i wonder why...
HTML:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="step">
<div class="handles">
<div class="handle" id="handle4" data-target="omnivor" draggable="true">Meat</div>
<div class="handle" id="handle1" data-target="vegan" draggable="true">Cocoa</div>
<div class="handle" id="handle2" data-target="vegan" draggable="true">Banana</div>
<div class="handle" id="handle3" data-target="omnivor" draggable="true">butter</div>
</div>
<div class="targets">
<div id="target1" class="target">vegan</div>
<div id="target2" class="target">omnivor</div>
</div>
</div>
</body>
</html>
Javascript:
window.addEventListener("load", function() {
// handles-container auf feste hoehe setzen, damit er fix bleibt
let handlesContainer = document.querySelector(".handles");
handlesContainer.style.height = handlesContainer.offsetHeight+"px";
// Handles draggable machen...
let handles = document.querySelectorAll(".handles .handle");
handles.forEach(function(e) {
e.addEventListener("dragstart", function(e) {
e.stopPropagation();
e.dataTransfer.setData('text/plain', this.id);
this.classList.add("drag-start");
});
e.addEventListener("dragend", function(e) {
e.stopPropagation();
this.classList.remove("drag-start");
});
});
// Targets empfaenglich machen...
let targets = document.querySelectorAll(".targets .target");
targets.forEach(function(e) {
e.addEventListener("dragenter", function(e) {
e.preventDefault();
this.classList.add("drag-enter");
});
e.addEventListener("dragleave", function() {
this.classList.remove("drag-enter");
});
e.addEventListener("dragover", function(e) {
e.preventDefault();
});
e.addEventListener("drop", function(e) {
e.stopPropagation();
this.classList.remove("drag-enter");
let elmnt = document.getElementById(e.dataTransfer.getData("text/plain"));
if(elmnt.dataset.target == this.innerText) {
console.log("korrekte zuordnung");
}
else {
console.log("Zuordnung falsch");
}
elmnt.remove();
});
});
});
Here is my codepen:
https://codepen.io/kili123/pen/MWByGVE
I want to make the itams draggable and droppable on all modern browsers..
It's not supported in FF Mobile
https://caniuse.com/?search=draganddrop