Question

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.

Answer 1

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.