so I’m writing a web application where the user can add labels onto an image, placing them somewhere to represent a place on the image (e.g. a label on a building blueprint) and I’m trying to figure out the best way to do this?
So far I’ve got the image loaded in as the background of a div, so I’m ready to start adding the content, but I need a way of “remembering” the position of the label, some kind of invisible grid with anchor points or the like?
I suppose Absolute positioning of the labels is the way to go, but they need to be fully moveable across the div without intefering with eachother and I need to be able to save the position of each label so to bring up the finished image/div at a later point.
I made this screenshot - basically the important part is how to create the Div with the background in a way that Elements can lie on/in it freely at static positions, and a way to save these positions for reloading at a later point.
CSS is a presentational language so it wont work for the functionality (drag and drop/storing) that you are seeking. As far as the positioning part of it goes, CSS is fine for that.
the basic CONCEPTUAL steps would be as follows:
Place your image as a bg in a wrapper element ( let’s say a UL, for example) , which will also contain the elements (LIs) to be dragged and drop ( allow for their size as well). Give the wrapper element that total height: & width: as set position:relative;
Assuming what you want to do is to place element over specific spots, you will need to create a numerical map of where those spots are on your BG image.
You will need create classes for all of those possible positions eg.: .resistor{top:100px ; left:55px} .cap{top:250px ; left:155px}… you may need to include classes for each item in it’s original position as well. then you can use .js/jquery to to detect the mouse event ( and keep track of its position offset, the value of which you will use to determine which class will me toggled onto the element) and switch the classes on the element so that they will snap into place.
I know that sounds convoluted, but i hope that helps
Hey thanks a lot for the reply! I understand that the storing etc will have to be done with a Database or the like and the drag and drop functionality with Javascript/jQuery, but my real trouble at the moment is to create a div in which I can place the items completely “freely”, meaning that they shouldn’t be bound by the kind of paragraph-lines or automargins created by lists, but rather be completely independent.
So in theory, if someone places an item in the div, he can place it anywhere and place any second item independently (so maybe 4px higher or whatever) aswell. I’m thinking I will need some sort of scaffold grid and store coordinates that indicate the position of each item, but I have no clue how I can allow items to be place completely freely within a div?
