Question

I’m trying to draw in a div that is a droppable element.

To be more precise, I’m drawing arrows using images in a div element.
You can see it here:
http://ekstrakt.selfip.com/coach/?cmp=articleedit

I tried every other way I could think of for drawing with Javascript, even used some libraries made for drawing (ex. draw2d.js), but this is the way it suits me most.

Now, the problem is, I’m placing them in a 900px wide div. When the total width of the added divs/images exceeds 900px, the browser is placing them in wrong places.

Part of the code:

el=document.createElement("div");
eli=document.createElement("img");
$(eli).attr("src", "docs/temp/"+data);
$(el).append(eli);
$(el).draggable();
$(el).draggable('destroy');
$(el).css("position", "relative");
$("#frame").append(el);
$(el).css("float", "left");
$(el).css("width", Math.abs(dot1.x-dot2.x));
$(el).css("height", Math.abs(dot1.y-dot2.y));
$(el).css("left", dot1.x-negativeDistance);
var tempPos=$(el).position();
console.log("position| "+tempPos.left+":"+tempPos.top);
$(el).css("top", dot1.y);
negativeDistance=negativeDistance+Math.abs(dot1.x-dot2.x);
if(negativeDistance>900){
  negativeDistance=negativeDistance-900;
}

When you see the example, you’ll see the problem. Just click on the green field twice on different places.

Or, if anyone has a solution for drawing in a div, please share.

Answer 1

Have you considered positioning the drawn divs inside div#frame absolutely as opposed to relatively? You may need to rework the math in your code a bit, but you should be able to avoid relatively-positioned floating elements affecting each other’s positioning within the parent div (which seems to be the source of your problem) this way. Just a thought.