Drag and Drop Series- Introduction to the project (Part 1/5)

Welcome to another new series on stronia.com! We really hope you enjoyed the series "Building a video player (HTML5)".

This series is going to be about learning to harness the power of HTML5's APIs. Drag and Drop API specifically.

The end product of today's part

View Demo

Introduction to drag and drop

Now, what is drag and drop. Well, you've probably used drag and drop a million times already. You use it to drag stuff on your desktop. You use it to move files between folders. You probably also learnt it in primary school's computer class as an action that can be performed by the mouse.

Well, if we enter the internet. It's a different story. There seems to be no sign of drag and drop anywhere in web pages in the pre HTML5 era. Building rich experiences with the drag and drop functionality was near to impossible.

With HTML5's drag and drop API,  you can build cool stuff!

Introduction to the project

In this project, we'll build a web page with two panels as shown in the figure. The green one on the right that contains the image and the red one on the left that contains the text where we'll drag and drop the image.

In later parts we'll also add functionality to highlight the left box indicating that it's a 'droppable' area.

Designing and styling our web page

Well, let's look at the figure. We see two text boxes. One with an image in it and one with some text in it. So, how do we build it? Well, if you didn't quite figure it our, here's how:

<section id="left">This is the landing zone!</section>
<section id="right">
<img id="img" width="100px" height="100px" src="<your image URL here>">
</section>

Now, let's style it. If you look at the figure, you can easily figure our the border styles of the boxes (solid red/green 5px) and the margin, width, height and padding is custom. Also, make sure to float both the boxes to left or else they wont look as in the figure. So, here's the stylesheet:

#left{
    float:left;
    width:250px;
    height:250px;
    margin:3px;
    padding:10px;
    border:5px solid red;
}
#right{
    float:left;
    width:250px;
    height:250px;
    margin:3px;
    padding:10px;
    border:5px solid green;
}

Conclusion

We have just started our with Drag and Drop so I didn't want to stuff too much of content in this post. We've got ourselves a basic template to work with the rest of this series. Also, we're mostly done with the HTML and CSS. In the rest of this series we'll be working on programming this app with JavaScript. So, I hope this part wasn't too hectic and you understood something. See you in the next post!