×
Namespaces

Variants
Actions
(Difference between revisions)

Handling drag-and-drop in WRT

From Nokia Developer Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Web Runtime (WRT)]]
+
[[Category:Symbian Web Runtime]][[Category:Code Examples]][[Category:UI]]
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:Solitaire.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20081006
 +
|author= [[User:Symbianyucca]]
 +
}}
 +
 
 
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.
  

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.
68 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×