Question

i have a dragable “li” and i use ajax with asp.net. When I start the page drop-drag is working, but when I click the button it doesn’t. How can I solve it? All help will be appreciated.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" >

$(document).ready(function(){ 
     $(function() {
           $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {

   }                                  

     });

    });

}); 

<div id="contentLeft" runat="server">
    <ul id="mainOptions" runat="server">

    <li id="recordsArray_2" runat="server">2. I am coming.</li>

    <li id="recordsArray_1" runat="server">1. How areyou?</li>

    <li id="recordsArray_4" runat="server">4. Which is yours?</li>

    <li id="recordsArray_3" runat="server">3. This is a book.</li>                  

    </ul>

</div>

<asp:Button ID="btnHelloWorld" runat="server" Text="Update label " 
                onclick="btnHelloWorld_Click" />

Answer 1

If you have your list inside update panel and script outside of it then $(document).ready will be fired only once when page is loaded. On this first load you set up drag and drop thing on your list.

Later you click a button and content of the update update is updated removing objects that have drag and drop plugins on them and passing fresh new ones from server. If you need to resetup drag and drop you can use page load event from asp.net ajax.