HTML5 Feature Detection and Drag and Drop – Part 1

0
1314

In this tutorial we are going to learn about two things.

  1. Feature Detection
  2. Drag and Drop

First let’s see “Feature Detection”.

  • What is Feature Detection?
    • Feature Detection is finding specific properties or methods in a browser’s DOM to detect the browser type and whether it supports a given operation.
    • DOM is “Document Object Model” which considers everything on the webpage as an object.
    • Feature Detection is not browser detection, it is actually finding out whether the browser supports certain features on a webpage. For example to find out whether the browser supports canvas element of HTML5.
    • Earlier, developers use to use “UA Sniffing” to detect the user’s browser using the navigator.userAgent property. This would detect the actual browser but was unreliable. This is now obsolete and not recommended.
  • Modernizr:
    • Modernizr is a 3rd party javascript library which detects the HTML5 and CSS3 features on a browser.
    • Modernizr does not try to detect the browser but it detects certain features such as actual methods/functions or properties.
    • You can download Modernizr at free of cost and actually pick and choose what features you want to search for and it will generate a javascript file to include in your HTML5 website. Once implemented you can use simple programming such as the lines below:
  • How do we implement Modernizr?
    • To implement Modernizr all what one needs to do is download the file, include it in your head section and add class=”no-js” to your html tag.
    • The example is shown below:
  • Testing for Object and Properties:
    • Modernizr creates properties for all of the features that it tests for. You can refer to these properties to check whether the browser supports the object and its properties.
    • Here is an example that checks to see if canvas is supported…

  • Updated CSS:
    • If a browser supports CSS3, we can use new gradient properties such as linear gradient on it.
    • But if the browser does not support CSS3, we can still apply it using Modernizr.
    • Using Modernizr, we can use the “no-js” and “no-cssgradients” rule to tell a browser that does not support CSS3 gradients, to use a specified background image instead of just ignoring it….
    • If the browser does not support CSS3, you can use the following code to include the CSS3 effect of background image.
    • If the browser supports CSS3, the code to include the background image can be written as follows:

    Now, as we have got some information of testing properties and objects using “feature detection”, we will get some introduction of “drag and drop” technique also.

  • Drag and Drop Syntax:
    • To drag any object from its place we need to just set the “draggable” attribute to “true”.
    • The image tag with draggable attribute is shown below:
    • We specify what we want to drag with ondragstart and the setData() function
    • The function is written below:
    • Here, ondragstart attribute calls the drag(ev) function. “ev” is the event which tells us what data to be dragged. “Text”,ev.target.id is the actual value of the dragged data and “Text” is its type.
  • Drag and Drop Syntax2:
    • By default, data/elements cannot be dropped in other elements. To allow a drop, we need to prevent the default handling of the element.
    • To do this, we use the event.preventDefault() function.
    • Let’s see the code for drop event:

    This was just the theory.We will learn and understand the code for drag and drop while actually practicing it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here