Question

我正在尝试绘制一个可放置元素的div。

更确切地说，我正在使用div元素中的图像绘制箭头。你可以在这里看到它： http://ekstrakt.selfip.com/coach/?cmp=articleedit

我尝试了其他用Javascript绘图的方法，甚至使用了一些用于绘图的库（例如draw2d.js），但这是最适合我的方式。

现在，问题是，我将它们放在900px宽的div中。当添加的div / images的总宽度超过900px时，浏览器会将它们放在错误的位置。

部分代码：

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;
}

当您看到该示例时，您将看到问题所在。只需在不同的地方点击绿色区域两次。

或者，如果有人有绘制div的解决方案，请分享。

Answer 1

您是否考虑将绘制的div放在div#frame 绝对内，而不是相对？您可能需要稍微修改代码中的数学运算，但是您应该能够避免相对定位的浮动元素以这种方式影响父div中的定位（这似乎是您的问题的根源）。只是一个想法。

使用jQuery在div中放置元素

1 个答案: