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.

How to disable dragging of images and text selection in web pages

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): N8, N900;
Keywords: Browsing, HTML, CSS, JavaScript, Qt, QtWebKit, WebKit
Created: aleksi.hanninen (21 Sep 2010)
Last edited: hamishwillee (05 Jul 2012)



This example demonstrates how to disable the dragging of images and the selection of text.

In webkit and some other web browsers and in QtWebKit (of Qt 4.6.3), images inside HTML button elements can be dragged, even by accident. When dragging happens, clicking the button is not possible. Further, since the dragging or text selection happen in the same way in QtWebKit as the panning of the web page, dragging and text selection happen very often. Thus developer should consider to disable the text selection and image dragging completely.

Here we show the client side solution for this problem, implemented with JavaScript, CSS and HTML.

Note that preventing text selection or preventing drag and drop operation does not prevent users to copy the content and images to their local file system.

Source: JavaScript

For each element to which you want to disable dragging, like images, use the function below.

window.onload = init;
function init() {
function disableDraggingFor(element) {
// this works for FireFox and WebKit in future according to
element.draggable = false;
// this works for older web layout engines
element.onmousedown = function(event) {
return false;

Currenlty, the element.draggable does not work in QtWebKit or the webkit of Safari 4.0.3.

Note that you should never call disableDragging for body element, since the onmousedown event bubbles, and if it is cancelled in the body element with event.preventDefault(), effects can be strange. For example, unfocusing the text input element by clicking elsewhere is not working, since the click event's default behaviour, unfocusing (blurring) the input element, is prevented. Further, if the application is run in a device with on-screen keyboard, the keyboard pops up when the mouse up event is happened in QtWebKit (of Qt 4.6.3), even if the mouse up event is not inside the text area.

Source: Relevant CSS elements

Add these CSS definitions to disable the text selection for most elements (note: the list of elements here is not complete). The -*-user-select definitions disable selecting of the text, and the -webkit-user-drag disables the dragging of the element.

Currently, the -webkit-user-drag works in the webkit of Safari 4.0.3, but not in the webkit of the QtWebKit of Qt 4.6.3.

html, body, div, span, object,
form, input, h1, h2, button, label, a, img {
-moz-user-select: none;
-webkit-user-select: none;
/* this will work for QtWebKit in future */
-webkit-user-drag: none;

However, since you probably want that the user can select the text input to be able to write into it, enable selection for text input elements as follows:

input[type=text] {
-moz-user-select: text;
-webkit-user-select: text;

Source: Relevant HTML elements

Here we define the dragging disabled image, which is put here inside a button.

<h1>You can't select this text by accident!</h1>
<img id="draggingDisabled" src="./images/fig1.png" alt="undraggable image"/>


Now the web page can be scrolled without accidentally selecting the text at the same time. Also the images are not dragged accidentally, when clicking them.

Supplementary material

The complete example page containing the examples discussed can be downloaded at

This page was last modified on 5 July 2012, at 08:07.
2328 page views in the last 30 days.