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.

Enabling drag-and-drop in Symbian WRT touch devices

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: isalento (20 Oct 2010)
Last edited: hamishwillee (12 Oct 2012)



In Symbian touch devices one cannot get mousemove, mouseover or mouseout events by default, due to the fact that screen is scrolled when you tap and slide the finger across the screen. However this default behaviour can be changed on touch devices equipped with Browser 7.1 or newer.

Enabling drag-and-drop Symbian Web Runtime widget

setNavigationType() plays the key role in enabling the drag-and-drop functionality. You may have used it in non-touch devices to set the tabbed navigation mode or when creating your own navigation handler. However in the touch devices calling widget.setNavigationType(“none”) enables you to capture mouse events including mousemove, which is essential for drag operation.

Please keep in mid that changing the navigation model also disables e.g. DOM scroll events when dragging your finger on the screen. Once the navigation type is set to none the default behavior when dragging on the screen selects any text and content. To prevent this you can adjust webkit user selection policy.

//enable dragging
//disable text selection -webkit-user-select: none; in css = "none";
//after you are done with the dragging you may change back to normal mode

Enabling drag-and-drop for a mobile website

Navigation type can be controlled for web sites as well. This is done with a proprietary meta tag. Hover unlike WRT you can only change the navigation type once per page load. So for example if you want to first switch to “none” and the back to “cursor” you would have to issue a reload by calling window.location.reload();. Unfortunately reloading degrades user experience, which means that recommended way to do it is to put the content that need drag functionality on a separate page.

The Meta tag can be either put straight to the head-section or you can do it via JavaScript


<meta name="navigation" content="none">


function addNavigationMeta(value){	
var meta = document.createElement('meta'); = 'navigation';
meta.content = value;


The following example shows how drag operation can be used to pan an image in a widget. It handles mousemove events and positions the background image respectively. For more complete drag and drop guides, please search the web as there is plenty out there. Example Widget

See also

Handling drag-and-drop in WRT

This page was last modified on 12 October 2012, at 06:17.
35 page views in the last 30 days.