Ok, so my last post involved me stating I was going to have a bash at making my own CMS system which enables users to create their own content but limits what they can do so all their content stays consistent and beautiful. 

So, first of all I had to decide what language(s)/technologies I was going to use to build such a platform and after a quick hunt around on the interweb I came across this HTML5 demo which uses 'contenteditable' http://html5demos.com/contenteditable. After having a quick read, this seemed like a good way forward.

However just using 'contenteditable' wouldn't cut it as I wanted users to be able to add, edit, move and delete content. With this in mind the choice was clear, I would look to use jQuery and jQueryUI, handy javacript libraries which enable you to do cool things like drag and drop with a single line of code.

So I got to setting up my page; first of all I had to give the user a way to add elements to the page, such as Titles, paragraphs, images etc. To do this I created a draggable toolbar which had buttons for each element I want the user to be able to add.

The tool bar has been completley styled with CSS3 to acheive rounded corners, gradients and drop shadows. I'm trying to see if I can do as much of the UI with out using images, so far it's going to plan. 

Next I Wanted to let the toolbar be draggable so the user can move it about. Through the magic of jQuery UI this was pretty easy to implement using the following code:

$("#newPost #controls").draggable({handle:'.dragBar'});

So all this code does is targets my controls div and makes it draggable, the 'handle' bit targets a div inside my controls and makes that the drag handle, simple eh? 

So next I had to make the buttons in my control toolbar do something, mainly, add an element to the page.

Stay tuned and next week I will reveal how to get editable elements on the page and how to make them re-orderble, editable and deletable.