如果它具有 runat="server" 属性，我如何使 div 可拖动

Posted 2023-05-08

【中文标题】如果它具有 runat="server" 属性，我如何使 div 可拖动

【英文标题】：How I can make a div draggable if this have the runat="server" attribute

【发布时间】：2012-11-17 05:25:06

【问题描述】：

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

这是我的代码：

<script>

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


       </script>

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

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

【参考方案1】：

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

请注意，runat="server" 本身不会做任何事情。 <div runat="server"></div> 将与 <div></div> 相同的内容发送回客户端。一旦你开始添加服务器属性和runat="server"，ASP.Net 就会开始修改渲染的内容（包括在visible="false" 的情况下什么都不渲染）。

【参考方案2】：

虽然 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 已成为服务器端控制标识。

你可以给你的控件一个 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>

我希望这会有所帮助！

库尔特