Javascript Drag and drop in windows phone 7.5

Question

I'm trying to get drag and drop functionality to work in a windows 7.5 phone. Initially i tried using the jquery ui draggable which worked in all browsers except windows 7.5. Later on exploring further, i found out that there are no touchstart, touchend and touchmove events in windows. So i tried getting it to work using mousedown, mousemove events which shockingly were firing. But they donot fire in a proper sequence. (mousemove fires before mousedown). Nor did the dragstart and dragend events work. I need to get this to work. Do you have any suggestions ?

/*Eg1:does not work*/
$("#draggable").draggable(); 

/*Eg2:This event does not fire*/
 $("#draggable").bind("touchstart touchmove touchend", function(){
alert("touch events supported");})

/*Eg3: In this case, mousemove fires before mousedown.*/
$("#draggable").bind("mousedown", function(){
alert("mousedown");});

$("#draggable").bind("mousemove", function(){
alert("mousemove");});

Answer 1

I only have experience working with Javascript in Windows Phone 8 which uses IE 10 (as opposed to IE 9 in WP7.5 and WP7.8) but you could give my approach a try.

In WP8 (IE10) Microsoft supports the pointer events MSPointerUp MSPointerMove MSPointerDown instead of touchstart , touchmove and touchend events. Try using these to see if they work.

In the example I had created, however, I did not even need to use those proprietary events as IE 10 happily used the standard mouse events ( mouseup mousemove mousedown ) and worked well to an extent . I did not have any problem with the order of events (like you stated in the question). The main problem that arose for me while dragging was that the mousemove event stopped being triggered (by the browser) and the browser instead started panning the page leaving my dragged elements in limbo state (no mousemove or mouseup triggered). Using event.preventDefault() did not help either as it did not prevent the page from panning. To overcome this problem I went through Microsoft's documentation about their touch events and came across this CSS line.

-ms-touch-action: none;

I applied this on my elements to be dragged and my problem was solved. You can read all about the above proprietary CSS property here . Be careful not to apply this property to the entire body of the page (I had done that earlier) as it prevents the default browser behaviour of page panning and zooming. As I said apply it only on the elements to be dragged and it works.

Yet again this is my experience for WP 8. I do not know if it works for previous versions of Windows Phone.