Drag n' Drop

There are a few ways to have drag n' drop interaction on your site. Know your application because they can have very different behaviors

In getting ready to make an online interactive site, I started to explore the different methods of having drag and drop ability presented to the visitor. In exploring the main two: HTML5 and jQuery, we see two very different behaviors. The HTML5 version is accomplished with pretty simple code that basically redefines the contents in a div as something is moved and dropped in it. The jQuery version operates "over" the viewed page. It doesn't allow the coding to perform logic operators that result in the new "dropped configuration, like a PHP script that wants to give a true/false from the result. So, depending on your application, you might want to use one, or the other, or both throughout the interactive pages.

Here is a page that uses both HTML5 and jQuery for drag and drop ability. I would say that the jQuery approach is much easier and quicker to code. Also, although this page is just basic, note the glitch things that happen with the HTML5 when one sushi is placed over another. The jQuery doesn't have that issue. Could it be resolved with more coding? Maybe, didn't look that far into it. Let me know if I missed something.

Click below to visit the page. The sushi in the boxes use HTML5, the green one uses jQuery:

Drag n' Drop Demo

Page top