Question

我正在尝试创建一个页面，我可以在运行时附加粘滞便笺，完全按照tutorial中的说明进行操作。

我已经在ASP.NET MVC 2中转换了样本（这是我正在使用的技术），一切正常。

所以我在视图中有一个DIV

<!-- Contains all the notes and limits their movement -->
<div id="notesDesktop" style="margin: 0 auto; position:relative;">
</div>

并且，在DOM准备好之后，我正在设置他的大小，使其占用所有可用空间，使用此代码

$("#notesDesktop").width($("#sectionContent").width());
$("#notesDesktop").height($("#sectionContent").height() - $("#actionArea").height());

我面临的唯一问题是，当我从数据库加载笔记并在“notesDesktop”中创建相关的DIV时，它们无法正确定位。代码就是这个

<div id="notesDesktop" style="margin: 0 auto; position:relative;">
   <% List<ContactNoteModel> list = (List<ContactNoteModel>)ViewData["noteList"];
        foreach (ContactNoteModel cnm in list) { 
            string[] pos = cnm.Position.Split(new string[] {"x"}, StringSplitOptions.RemoveEmptyEntries);
    %>
    <div class="note <%=cnm.Color%>" style="left:<%=pos[0]%>;top:<%=pos[1]%>;z-index:<%=pos[2]%>;">
       <div class="body"><%=cnm.NoteText%></div>
       <div class="author"><%=HttpContext.Current.User.Identity.Name %></div>
       <span class="data"><%=cnm.ContactNoteID%></span>
    </div>
   <%  } %>
</div>

产生类似这样的东西

<div class="note yellow ui-draggable" style="left:43;top:269;z-index:4;">
   <div class="body">This is a note!</div>
   <div class="author">admin</div>
    <span class="data">2</span>
</div>

正如您所看到的，创建的DIV具有绝对定位值，并且其CSS类声明它应该绝对定位在其容器中。无论如何，尽管如此，他的定位是top = 0和left = 0 :(

我怀疑发生这种情况是因为当音符DIV以动态方式创建时，容器DIV仍然没有固定的高度和宽度（当然会在DOM上设置），因此元素不能绝对定位在其中。

当然，我可以改变自己的观点，在DOM上准备创建注释div，但在改变所有代码之前，我想知道我是否可以使用一些代码来让他们尊重他们想要的位置。< / p>

我的英语并不完美所以我希望能清楚说明我的问题。有什么建议吗？

提前感谢帮助

Answer 1

我认为您需要在像素值的末尾添加'px'。您需要传入要分配给css属性的值的单位。

如何在创建DOM后准备好DIV

1 个答案: