none
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.
    • Edited by Rhywden Sunday, March 18, 2012 4:11 PM
    Sunday, March 18, 2012 3:09 PM

Answers

  • 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)

    Wednesday, March 21, 2012 6:28 PM

All replies

  • 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)

    Wednesday, March 21, 2012 6:28 PM
  • 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).

    Thursday, March 22, 2012 1:34 AM
  • 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?
    Monday, September 24, 2012 6:12 AM