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 over the next few weeks. Thanks for all your past and future contributions.
Enabling drag-and-drop in Symbian WRT touch devices
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.
//disable text selection -webkit-user-select: none; in css
document.body.style.webkitUserSelect = "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.
var meta = document.createElement('meta');
meta.name = '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