×
Namespaces

Variants
Actions
Revision as of 12:07, 21 September 2010 by aleksi.hanninen (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

From Nokia Developer Wiki
Jump to: navigation, search

Template:KBCS

Article Metadata
Tested with
Devices(s): N8, N900;
Compatibility
Platform(s):  
Article
Keywords: Browsing, HTML, CSS, JavaScrpt, Qt, QtWebKit, WebKit
Created: (23 Apr 2010)
Last edited: aleksi.hanninen (21 Sep 2010)

Overview

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() {
disableDraggingFor(document.getElementById("draggingDisabled"));
}
 
function disableDraggingFor(element) {
// this works for FireFox and WebKit in future
// according to http://help.dottoro.com/lhqsqbtn.php
element.draggable = false;
// this works for older web layout engines
element.onmousedown = function(event) {
event.preventDefault();
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>
<button>
<img id="draggingDisabled"
src="./images/fig1.png" alt="undraggable image"/>
</button>

Postconditions

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 File:Testwebkit-disable-drag-and-text-select.zip.

1589 page views in the last 30 days.
×