×
Namespaces

Variants
Actions
(Difference between revisions)

Handling drag-and-drop in WRT

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Add ArticleMetaData)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
Line 1: Line 1:
 +
[[Category:Symbian Web Runtime]][[Category:Code Examples]][[Category:UI]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:Solitaire.zip]]  
 
|sourcecode= [[Media:Solitaire.zip]]  
Line 21: Line 22:
 
|author= [[User:Symbianyucca]]
 
|author= [[User:Symbianyucca]]
 
}}
 
}}
[[Category:Symbian Web Runtime]]
+
 
 
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.
 
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.
  
Line 60: Line 61:
 
  posY = myEvent.clientY;
 
  posY = myEvent.clientY;
 
</code>
 
</code>
[[Category:Code Examples]]
 

Latest revision as of 08:44, 10 October 2012

Article Metadata
Code Example
Source file: Media:Solitaire.zip
Article
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 Solitaire.zip.

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 08:44.
59 page views in the last 30 days.
×