top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Tricky Issue With HTML5 Drag And Drop

0 votes
333 views

Recently a reader asked about a tricky issue with HTML5 drag and drop. The issue is this:

HTML5 supports native drag and drop through draggable property and several events such as dragstart, drag, dragenter, dragleave, dragover and drop. Normally dragstart event handler is where you set the data that is to be transferred between the drag source and drop target. The drop event handler is where you handle the drop of a drag source, access the data transferred and process it further. Now, in this particular case he had handled only the dragstart and drop events. And the drop event handler never used to get called. In other words dragging operation was successful but dropping operation was not.

To understand the problem and the solution clearly, let's quickly recreate the problem in a simple web form. Consider the following HTML markup:

<form id="form1" runat="server">
   <div id="div1" style="width:300px;height:300px;border:2px solid red" draggable="true"></div>
   <div id="div2" style="width:300px;height:300px;border:2px solid red"></div>
</form>

As you can see there are two <div> elements. The first element - div1 - is draggable as indicated by the draggable attribute. The second div - div2 - acts as the drop target.

Now, consider the following jQuery code that handles the dragstart and drop events:

$(document).ready(function () {
     var div1 = $("#div1").get(0);
     var div2 = $("#div2").get(0);

     div1.addEventListener("dragstart", function (e) {
       $("#div1").html('drag started...');
       e.dataTransfer.setData('text/html', 'hello world');
     }, false);

       div2.addEventListener("drop", function (e) {
         e.stopPropagation();
         e.preventDefault();
         $("#div2").html(e.dataTransfer.getData('text/html'));
         return false;
   }, false);
});

The dragstart event handler sets the HTML of div1 to 'drag started...' and sets data to be transferred to 'hello world'. The drop event handler calls stopPropagation() and preventDefault(), and sets the HTML of div2 to the data passed via dataTransfer object. When you drag div1 and drop onto div2, you would expect div2 to display 'hello world'.

Now the tricky thing is that if you run the above code (Chrome or Firefox) it won't fire the drop event at all. The solution is to handle dragover event also. The default handler for dragover doesn't allow drop. This design ensures that something can be dropped only on a developer defined valid target and that all elements don't act as a valid drop targets by default. So, even if you don't want to do anything specific in dragover event handler add one as shown below:

div2.addEventListener("dragover", function (e) {
  e.preventDefault();
}, false);

After adding dragover event handler, run the web form and now the drag-n-drop should work as expected.

posted Nov 23, 2016 by Shivaranjini

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

In HTML , SVG and Canvas are two important graphics features.It is a Vector graphics technology.

What is Vector Graphics?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.

Vector graphics range in complexity from simple to moderate to extremely complex. The following are some basic examples.

  1. Simple - Callout in a document or illustration.
  2. Moderate - Illustrations such as charts, diagrams and maps.
  3. Complex - Documents such as those used for engineering.

Canvas

Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

More Information about canvas - http://tech.queryhome.com/51054/about-html5-canvas

SVG

SVG is used to describe Scalable Vector Graphics

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

More Information about SVG - http://tech.queryhome.com/50869/about-svg-part-1

A Comparison of Canvas and SVG

Canvas

Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to image in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas

SVG

Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility

Video Tutorial for svg and canvas

https://www.youtube.com/watch?v=_OiVBQY9hG0

Both Canvas and SVG are important components of the HTML5 graphically rich Web.Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way.

Images for svg and canvas features

Image svg-canvas

READ MORE

What is HTML5

HTML5 stands for Hyper Text Markup Language and we use this technology in order to develop websites.

What is Flash

Adobe Flash is a rich internet application (RIA) tool as well as a multimedia platform. It is used to add animation and interactivity to games, advertisements and different types of web pages.

Comparing HTML5 vs FLASH

The main difference between HTML5 and Flash is that HTML5 has mobile capabilities because it uses pure code to generate the interactive content. This means it can look and behave differently when seen on different browsers, which is ideal for web designers who want to create different versions of a website for various platforms. However, Flash has been around for almost as long as the actual Internet has and still holds some advantages over HTML5.

HTML5 page can look and behave differently when accessed from different browsers, making it a bless for web designers that want to create different versions of their website for different platforms, and a real pain for those who just need to make a website look and feel the same on all devices.

Flash has been around pretty much since the beginning of the Internet. Well, maybe not its exact beginning, but ever since you started seeing something moving on a website, chances are you were looking at a piece of Flash content. Flash uses containers to store the interactive content, which are then rendered in browsers using a plugin – Flash Player.

Video Tutorial for Flash Vs HTML5

https://www.youtube.com/watch?v=aVjIsL8qwNw

HTML5 is free while Flash is not. Flash content, on the other side, has its dedicated development environment, which you have to buy.

Advantages for Flash Over HTML5
Flash is more ubiquitous (98% of desktop users)
Adobe Flash is a mature technology
The developer tools are strong and well supported
Designers are comfortable in working in flash
Flash allow you to record video and voice from the PC Web browser.
Flash as a strongly typed object oriented language (ActionScript 3), similar to Java.

Advantages for HTML5 Over Flash

Doesn't require any "player" to be installed
Runs on mobile devices
Provides better performance than Flash on some platforms (for example Mac OS X and Linux)
HTML5 content runs about 58% faster than Flash applications.

READ MORE
...