×
Namespaces

Variants
Actions
(Difference between revisions)

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

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix links)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
 
[[Category:Browser]]
 
[[Category:Browser]]
__NOTOC__
+
{{ArticleMetaData <!-- v1.2 -->
__NOEDITSECTION__
+
|sourcecode= [[Media:testwebkit-disable-drag-and-text-select.zip]]
{{KBCS}}
+
{{ArticleMetaData
+
|id=
+
|platform=&nbsp;
+
|devices=N8, N900;
+
|category=Web Technologies
+
|subcategory=HTML, JavaScript, CSS
+
|creationdate=April 23, 2010
+
|keywords=Browsing, HTML, CSS, JavaScript, Qt, QtWebKit, WebKit
+
 
+
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
+
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+
|devices= N8, N900;
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
+
|platform= &nbsp;
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|author=[[User:Aleksi.hanninen]]
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Browsing, HTML, CSS, JavaScript, Qt, QtWebKit, WebKit
 +
|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= 20100921
 +
|author= [[User:Aleksi.hanninen]]
 +
<!-- The following are not in current metadata -->
 +
|subcategory= HTML, JavaScript, CSS
 
}}
 
}}
  
Line 55: Line 59:
 
</code>
 
</code>
  
Currenlty, the <tt>element.draggable</tt> does not work in QtWebKit or the webkit of Safari 4.0.3.
+
Currenlty, the {{Icode|element.draggable}} does not work in QtWebKit or the webkit of Safari 4.0.3.
  
Note that you should never call <tt>disableDragging</tt> for body element, since the <tt>onmousedown</tt> event bubbles, and if it is cancelled in the <tt>body</tt> element with <tt>event.preventDefault()</tt>, 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.
+
Note that you should never call {{Icode|disableDragging}} for body element, since the {{Icode|onmousedown}} event bubbles, and if it is cancelled in the {{Icode|body}} element with {{Icode|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==
 
==Source: Relevant CSS elements==
Line 105: Line 109:
  
 
[[Category:Web]][[Category:Code Snippet]]
 
[[Category:Web]][[Category:Code Snippet]]
 +
[[Category:Code Examples]]

Latest revision as of 11:07, 5 July 2012

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

Contents

[edit] 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.

[edit] 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.

[edit] 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;
}


[edit] 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>

[edit] 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.

[edit] Supplementary material

The complete example page containing the examples discussed can be downloaded at File:Testwebkit-disable-drag-and-text-select.zip.

This page was last modified on 5 July 2012, at 11:07.
1620 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.

×