Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Handling drag-and-drop in WRT

From Wiki
Jump to: navigation, search
Article Metadata
Code Example
Source file:
Created: symbianyucca (06 Oct 2008)
Last edited: hamishwillee (10 Oct 2012)

Some card games that are using mouse in their normal play mode would require drag-and-drop methods to be used when the left mouse button is pressed. As with WRT we do not have mouse buttons, we need to handle the issue in another way.

This example case is based on solitaire example for which you could find the original code from freejavascriptgames.

The modified version for WRT can be found from

With the example the Draw and drop is handled in a way that when user clicks a button (other than the ones used for virtual mouse) the Drag and drop is tarted, and when the key is released the drag and drop is stopped (i.e. drop is done).

So to start modification, first thing to do is to modify the onmousedown & onmouseup handler, and replace them with onkeydown and onkeyup instead.

This is of course easy, just locate the point where the mouse event is mapped to a function (something like this way):

 document.onmousedown = self.onMouseDown;
document.onmouseup = self.onMouseUp;

And replace it with key handling:

 document.onkeydown = self.onMouseDown;
document.onkeyup = self.onMouseUp;

Now when user clicks any button the function is called. The next problem is that when you click with a mouse you can easily get the element under the mouse, but when you are handling the start of the drag with keys, you would get the whole form as an object if you use same functions than with the mouse click.

Thus you need to modify any element selection code to take the element that is currently under the mouse pointer. This is rather easy an can be done with following line of code:

 var object = document.elementFromPoint(posX, posY);

The problem with WRT is that when the click happens, mouse coordinates appear to be zero, thus to get it actually working we need to define the posX, posy as global variables, and update their values in the onmousemove function as follows:

 if (typeof e == 'undefined') {
myEvent = window.event;
} else {
myEvent = e;
posX = myEvent.clientX;
posY = myEvent.clientY;
This page was last modified on 10 October 2012, at 05:44.
26 page views in the last 30 days.