Determine what is being dragged from dragenter & dragover events

Question

I\'m trying to use the HTML5 draggable API (though I realize it has its problems). So far, the only showstopper I\'ve encountered is that I can\'t figure out a way to determ

Answer 1

In the drag event, copy event.x and event.y to an object and set it as the value of an expando property on the dragged element.

function drag(e) {
    this.draggingAt = { x: e.x, y: e.y };
}

In the dragenter and dragleave events find the element whose expando property value matches the event.x and event.y of the current event.

function dragEnter(e) {
    var draggedElement = dragging.filter(function(el) {
        return el.draggingAt.x == e.x && el.draggingAt.y == e.y;
    })[0];
}

To reduce the number of elements you need to look at, you can keep track of elements by adding them to an array or assigning a class in the dragstart event, and undoing that in the dragend event.

var dragging = [];
function dragStart(e) {
    e.dataTransfer.setData('text/html', '');
    dragging.push(this);
}
function dragEnd(e) {
    dragging.splice(dragging.indexOf(this), 1);
}

http://jsfiddle.net/gilly3/4bVhL/

Now, in theory this should work. However, I don't know how to enable dragging for a touch device, so I wasn't able to test it. This link is mobile formatted, but touch and slide didn't cause dragging to start on my android. http://fiddle.jshell.net/gilly3/4bVhL/1/show/

Edit: From what I've read, it doesn't look like HTML5 draggable is supported on any touch devices. Are you able to get draggable working on any touch devices? If not, multi-touch wouldn't be an issue and you can resort to just storing the dragged element in a variable.