Thank you so much for your input here.
I have managed some improvements -- it's not finished yet so there is no drop action defined. I started reading the drag & drop docs on mozilla.org and, while they don't really have any complete example code, I started to work with the event's dataTransfer object and this appears to have fixed the problem:
function handleDragStart(e) {
// this / e.target is the source node, i.e., the html node being dragged
// console.log(e.target);
var dt = e.dataTransfer;
dt.setData("text/html", e.target.innerHTML);
var key = parseInt(e.target.getAttribute("key"));
// You should always include a plain text alternative for the node @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types
dt.setData("text/plain", prompts[key]);
this.style.opacity = '0.5';
}
It still won't work on my iPhone. I try to drag one of the DIV tags and it just scrolls the entire screen around. Any thoughts on how to get it working on iOS would be greatly appreciated.
Also, I need to figure out some other things:
When an object is being dragged, it should only be droppable on one of the black target divs at the bottom -- and only if some other div has not already been dropped thre
When an object is successfully dropped on a target DIV, it should disappear from the top box and appear snapped snugly on to the target div
* If one drags a DIV and doesn't successfully drop it on a target div, it should snap back to its original location and have its opacity restored.
Right now I'm trying to figure out how to detect a successful drop and take the appropriate action.
