Question

我想让我的div块可拖动并且它可以工作但是如果我使用runat =“server”属性我的div块我可以使用visible =“false”属性比我不能使用draggable。

这是我的代码：

<script>

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


       </script>

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

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

Answer 1

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

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

Answer 2

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

在回答原始问题时，如果你使用runat，如何将draggable应用于元素......

选项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已成为服务器端控制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>

我希望这有帮助！

库尔特

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

2 个答案: