Establishing drag-and-drop functionality


show more Establishing drag-and-drop functionality provides you with in-depth training on Web. Taught by Joseph Lowery as part of the HTML5 Projects: Engaging Ecommerce show less
please wait ...

Establishing drag-and-drop functionality

For such a high-level effect like a drag-and-drop--what? You mean I can actually drag pieces of a web page a round and they do something? For such an effect, drag-and-drop is really pretty easy to implement. And the first part on the HTML side is what my dad lovingly called dirt simple. So, let's go on over to our code editor. And I'm going to scroll down to where we have the elements that we want to drag, the paintings that are in this article tag with an id of gallery. And there are six paintings in all, each of them within a div, with an id like painting1, painting2, and so forth.

So, to make these draggable, all we need to do is to go into that div, add a new attribute--draggable-- and set that equal to true. That's it. So, I'm going to copy draggable=true and then in each of the divs, paste it in. Believe it or not, that's it. There is nothing to demo at this point-- we will need to bring in some JavaScript first-- but our drag-and-drop functionality is really good to...

Establishing drag-and-drop functionality
Video duration: 1m 12s 37m 29s Intermediate

Viewers:

Establishing drag-and-drop functionality provides you with in-depth training on Web. Taught by Joseph Lowery as part of the HTML5 Projects: Engaging Ecommerce

Subject:
Web
Software:
HTML JavaScript CSS
Author:
please wait ...