I have two separate <p> elements and what I want to do is have it so they can be clicked on, dragged, and dropped in a new location. And when they are dropped I want them to send their css left: and top: values to the console.
They start off with top: 0,left: 0. I want their final reported top and left values to be relative to their initial position. So if I drag and drop one 5 pixels to the right and 15 pixels down from their original position I want it to return top: 15, left: 5.
I’m also using jQuery if that would make this any easier to pull off. So how do I go about doing this?
Also, ideally I want them not to be accidentally selected with the text cursor when dragging and dropping. Is there a way to make them act like divs or maybe cover them with a div that fits to their shape and is above them but invisible?
Look at jquery ui droppable: http://jqueryui.com/demos/droppable/