First of all I'd like to say - I don't want someone to do my coding. I'm just looking for tips/pointers/suggestion.
Background:
I'm using jQuery and jQueryUI drag/drop
I have a droppable div with dimensions 500px x 500px. This is
#div-droppable.I have a draggable div with same dimensions as
#div-droppable. Let us call it#div-draggable.There are a lot of draggable products from
#div-draggablethat are possible to drag to#div-droppable.- Each product in
#div-draggablehas dimension 50px x 50px.
Example:
I have dragged 50 products from #div-draggable to #div-droppable, and they are now absolutely positioned within the #div-droppable.
Now I want to save the content in #div-droppable to a third DIV called #div-draft. The #div-draft has the dimension 250px * 250px. I want the products located in #div-droppable being stored related to the #div-draft.
My thoughts:
If one dragged product is absolutely positioned within the #div-droppable with left: 50px and top:100px, the same product in #div-draft would be positioned with left:25px and top:50px (because #div-draft is half the size of #div-droppable). Also the size of each product would be half the size (25px * 25px)
I could do some calculation (as described above) of all products in #div-droppable and put each product in #div-draft
My question:
Is there any other way/smarter way/better way of doing this? I'm basically looking to clone a certain divs (#div-droppable) content into another div (#div-draft) but I want the content to be resized relatively to the size of #div-draft.