CODEWITHSUNDEEP
c#javascriptasp.nethtmljquery-ui-draggable
Tarasov
Tarasov

Reputation: 3683

How I can make my Div draggable with jQuery in ASP.NET

I have a ASP.NET Application with a master site and content sites. in one of this content sites I have a Div with Controls and I want to try it make draggable with jQuery but I don't know how I can to this in ASP.NET because of the Control Id in asp.

here is my code:

master site:

...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Script/jquery-ui.js" type="text/javascript"></script>

    <script>

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

       </script>

</head>
<body>
    <form id="mainform" runat="server">
    <div class="gastzugang">
        <asp:ContentPlaceHolder ID="lw_header" runat="server">
            <!--Header-->
        </asp:ContentPlaceHolder>
         <asp:ContentPlaceHolder ID="lw_content" runat="server">
             <!--Content--> 
        </asp:ContentPlaceHolder>
         <asp:ContentPlaceHolder ID="lw_footer" runat="server">
            <!--Footer-->
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

My Content Site:

<%@ Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="CreateUser.aspx.cs" Inherits="lw_gastzugang.CreateUser" %>

<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
    <div class="createuser">

        <div class="create_box">
            <div class="newUser">

        Benutzer Anlegen <br/>
        <br/>

//Here are my Controls

        <br/>
        <asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen" 
                    onclick="btnAnlegen_Click" />

             </div>
        </div>

    </div>


</asp:Content>

I want to this:

http://jqueryui.com/droppable/

Upvotes: 1

Views: 1687

Answers (2)

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Just use jQuery UI draggable.

Make

ClientIDMode="static" in the asp.net Tag

Or Use

<script type="text/javascript">
    $('#'+'<%=lw_content.ClientID%>').draggable();
</script>

Upvotes: 3

backdesk
backdesk

Reputation: 1781

You could take a look at hammer.js which covers a 'drag' style event:

https://github.com/EightMedia/hammer.js

The drag example there is at:

http://eightmedia.github.com/hammer.js/drag/

Now I don't know too much about ASP.NET but what I would try is applying the drag behaviour to anything with a .draggable class.

Hope that helps a little!

Upvotes: 0

Related Questions