0

好的，我创建了一个 JavaScript 页面，用户可以在其中添加文本，他们可以设置颜色、粗斜体以及大小和字体。通过下拉框选择大小和放置选项。

在此处输入图像描述

它看起来有点凌乱，因为我不担心外观，只担心功能。

当他们添加出现在小部件中的元素时，他们可以将元素拖动到我创建的图像上，该图像显示在屏幕上。每当用户对文本的位置感到满意时，他们单击保存生成坐​​标并更新表格 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";

拖放 JavaScript 代码基于本教程

http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

有什么办法可以做到，所以当你动态添加一个新元素时，它不会自动将你添加的每个新元素在屏幕上向下推一点。在过去的几天里，我尝试了很多不同的选项来解决这个问题，但都没有运气。

提前感谢您的帮助

编辑文本元素的 CSS

   .text1{
position: relative;
left: 0px;
top: 0px;

}
4

1 回答 1

0

我更改为绝对定位并将其放置在相对定位的容器中，现在可以正常工作了！！

于 2012-04-23T18:55:04.510 回答