How we can clone any HTML element using drag then drop it in another column (only in that column not outside from it)

I am doing work on drag and drop in HTML 5. Someone suggested to me to use jquery-ui because they have lot of stuff already implemented.

I am able to drag and drop any HTML element only in one column right now, but I want to be able to clone any HTML element from one column to another column. I want the original element to stay in its origin column as well.

This concept is shown in this example.

In this example, "test" div can be cloned and dropped anywhere, but I to be able to drop it only in the "drop" column - it can be dropped anywhere in this column.

After dropping, I also want to resize it, change the position, save the properties such as size, width, height, etc in a file or Database.