好的我已经创建了一个JavaScript页面供用户添加文本,他们可以设置颜色,粗体斜体以及大小和字体。大小和放置选项通过下拉框选择。JavaScript拖放问题
它看起来有点凌乱ATM,因为我不担心的样子,只是功能。
当他们添加出现在窗口小部件中的元素时,他们可以将元素拖动到我创建的图像上并显示在屏幕上。只要用户对文本的位置感到满意,他们就点击生成坐标的保存并更新表格X和Y坐标字段。此时,会生成一个新行并可以重复添加新元素的过程。每当他们快乐的时候,他们点击保存,它会发送到一个数据库存储它以便以后检索。
我的问题是每当我添加一个新的文本字段时,它会将元素压低一定的量。
我加入递减变量更是把elementCount中(其中自动递增每次添加一个新的标签元素的时间),并乘以它由一组量
decr -= (elementCount* 16);
递减此为正常工作纠正此中等文本大小,但是当你开始添加不同的文本大小和字体组合时,它会改变元素被压下的程度,所以它会变得越来越差,而且你添加的其他元素越来越差。
新元素添加这样
elementCount++;
var Text = textArray[textArray.length-1];
var Font = fontArray[fontArray.length-1];
var Color = colorArray[colorArray.length-1];
var Bold = boldArray[boldArray.length-1];
var Size = sizeArray[sizeArray.length-1];
var Italics = italicsArray[italicsArray.length-1];
var X = xCordArray[xCordArray.length-1];
var Y = yCordArray[yCordArray.length-1];
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>";
document.getElementById(divName).appendChild(newdiv);
var decr= 32;
decr-= (elementCount* 16);
Y = parseInt(Y) + test;
X = parseInt(X) + 24;
document.getElementById("text" + elementCount).style.left = X + "px";
document.getElementById("text" + elementCount).style.top = Y + "px";
拖放正是基于此教程
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
JavaScript代码有没有什么办法让它所以当你动态地添加一个新的元素,它不会自动将其按照您添加的每个新元素向下推到屏幕上。在过去的几天里,我尝试了很多不同的方法来解决这个问题,并且没有运气。
预先感谢任何帮助
编辑CSS文本元素
.text1{
position: relative;
left: 0px;
top: 0px;
}
新'div'是否有一些默认的CSS:'position:absolute;顶部:0;左:0;'?如果需要,还可以使用独特的“z-index”。如果它没有完全定位,它将遵循DOM的正常流程,其位置将受到其他元素的影响,反之亦然。 – MrCode 2012-04-20 16:07:49
请参阅我的编辑元素CSS的例子。我使用亲戚,所以我想这可能是一个坏主意。将尝试绝对,并看看是否有所作为 – AdamM 2012-04-21 18:15:48