Simple drag and drop of arbitrary HTML elements

Question

So, here's what I've yet to figure out:

How do I make an arbitrary HTML element draggable? Say, a rectangular <div> with a red background by the size of 100x100 px²

Setting its attribute to draggable="true" does exactly nothing. Not to mention that a lot of the HTML5 examples you can find with Google either use the premade components _or_ only work with mouse input (like the IE10 demo FridgeMagnets).

edit: It's about dragging elements by using touch events, not the usual mouse-events. Those work fine.

Answer 1

Hi R,

Thank you for taking time for reporting this.  There is a bug filed against this problem already.  Look for a fix in a future release.  You will notice that this is not just a Metro style app issue but IE 10 has this issue.  HTML5/Javascript apps use the same rendering engine and that is why you are seeing this problem.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

I was able to get drag-drop working in metro html app (even with touch) on divs;  For eg: with jquery :

$('.anydivid')
            .attr('draggable', 'true')
            .on('dragend', this.cancelEv)
            .on('dragstart', function (ev) {
                
                // do custom stuff
                
             return true;
            });

cancelEv: function (ev) {
            ev.preventDefault();
            return false;
        }

but notice one problem - the drag-drop shadow background image is not visible (tried both dark and light background in metro). You can see the shadow inside ie10, but in ie10 the shadow is not exact copy. (eg: if you use border-radius on div with rect box, the shadow still shows up as full rect box. Not border-radius).

Answer 3

See also this article:

http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
and this one linked on the first site:
http://msdn.microsoft.com/en-us/library/ie/hh771898%28v=vs.85%29.aspx

Answer 4

I was able to get drag-drop working in metro html app (even with touch) on divs;  For eg: with jquery :

$('.anydivid')
            .attr('draggable', 'true')
            .on('dragend', this.cancelEv)
            .on('dragstart', function (ev) {
                
                // do custom stuff
                
             return true;
            });

cancelEv: function (ev) {
            ev.preventDefault();
            return false;
        }

but notice one problem - the drag-drop shadow background image is not visible (tried both dark and light background in metro). You can see the shadow inside ie10, but in ie10 the shadow is not exact copy. (eg: if you use border-radius on div with rect box, the shadow still shows up as full rect box. Not border-radius).

I tried above method but could not get an element draggable, what may be the reasons?