How I can make a div draggable if this have the runat=“server” attribute

Question

I want to make my div block draggable and it works but if I use the runat="server" Attribute for my div block that I can use the visible="false" Attribute than I don't can use the draggable.

Here my Code:

<script>

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


       </script>

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

What can I do this in ASP.Net?

Answer 1

If you use runat="server" visible="false" , then that's a server-side attribute, and the element won't get sent to the client at all. Try using style="display: none;" instead -- this renders the div to the client but makes it hidden.

Note that runat="server" doesn't do anything by itself. <div runat="server"></div> sends the same thing back to the client as <div></div> . It's once you start adding server attributes along with runat="server" that ASP.Net starts modifying what gets rendered (including rendering nothing at all in the case of visible="false" ).

Answer 2

Although display:none doesn't show the element in the browser, it still outputs the HTML to the browser and relies on browser rendering to choose whether to show the element. This can cause the element to 'flicker' on screen if there's a delay between the page being loaded and the CSS being applied.

In answer to the original question, how can you apply draggable to the element if you're using runat...

Option 1: You can set draggable server-side:

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

This will output (from your example):

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

Making the element draggable in HTML5 - the same as the jQuery option is doing.

Option 2: Set through jQuery using a different selector.

You're currently selecting based on the ID, but as your control is a server-side control, it's ID as you've set, isn't what it output to the browser - the ID has become it's server-side control ID.

You could give your control a CSS class and use this to select your element instead:

<script>

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

</script>

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

Option 3: Specify the correct ID in the client-side script

In the ASPX page you can modify the output javascript to use the correct 'ClientID'. See below:

<script>

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

</script>

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

I hope this helps!

Kurt