0

我想让我的 div 块可拖动并且它可以工作，但是如果我对我的 div 块使用 runat="server" 属性，我可以使用 visible="false" 属性，而不是可以使用可拖动的。

这是我的代码：

<script>

        $(function () {
            $("#draggablebox").draggable();
        });


       </script>

<div class="create_box" id="draggablebox" runat="server" visible="false">
          ...
        </div>

我可以在 ASP.Net 中做什么？

4

2 回答 2

3

如果您使用runat="server" visible="false"，那么这是一个服务器端属性，并且该元素根本不会被发送到客户端。尝试style="display: none;"改用 - 这会将 div 呈现给客户端，但使其隐藏。

请注意，runat="server"它本身不会做任何事情。 <div runat="server"></div>将相同的内容发送回客户端<div></div>。一旦您开始添加服务器属性以及runat="server"ASP.Net 开始修改呈现的内容（包括在 的情况下根本不呈现任何内容visible="false"）。

于 2012-11-29T07:22:33.583 回答
1

虽然 display:none 不会在浏览器中显示该元素，但它仍然会将 HTML 输出到浏览器，并依赖浏览器渲染来选择是否显示该元素。如果在加载页面和应用 CSS 之间存在延迟，这可能会导致元素在屏幕上“闪烁”。

在回答原始问题时，如果您使用 runat，如何将可拖动元素应用于元素...

选项1： 您可以设置可拖动的服务器端：

draggable.Attributes["draggable"] = "true"

这将输出（来自您的示例）：

<div class="create_box" id="draggablebox" runat="server" visible="false" draggable="true">
...
</div>

使元素在 HTML5 中可拖动 - 与 jQuery 选项所做的相同。

选项 2： 使用不同的选择器通过 jQuery 设置。

您当前正在根据 ID 进行选择，但是由于您的控件是服务器端控件，因此它是您设置的 ID，而不是它输出到浏览器的内容 - ID 已成为它的服务器端控件 ID。

你可以给你的控件一个 CSS 类，然后用它来选择你的元素：

<script>

$(function () {
    $(".draggablebox").draggable();
});

</script>

<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
      ...
</div>

选项 3：在客户端脚本中指定正确的 ID

在 ASPX 页面中，您可以修改输出 javascript 以使用正确的“ClientID”。见下文：

<script>

$(function () {
    $('<%= draggablebox.ClientID %>').draggable();
});

</script>

<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
      ...
</div>

我希望这有帮助！

库尔特

于 2013-05-26T19:49:29.127 回答