How can I create a draggable item in a web application?

first time creating something like this.

How would I create a hotbar type rectangle where I can drag icons 开发者_如何转开发and have them lock into a space in the hotbar?

This is 100% for my learning purposes and I'm aware I'd need something like Javascript.

The thing is I don't know where to begin to tackle this.

Just a simple example.

Create a group of 3 icons and be able to click and drag around the icons in my page.

You are going to want to use something like jQuery UI. It gives you the Javascript framework to do drag, drop, rescale, etc.

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

I would suggest starting with some basic jQuery tutorials and then move on to the UI tutorials and demos.

http://docs.jquery.com/Tutorials

jQuery is a little intimidating at first glance, but once you get the hang of it, it is very powerful and takes care of all the cross-browser incompatibilities as a bonus.