После первого действия скрипт перестает работать
 

Возникла одна проблема. Вот скрипт который делает сортировку у перетаскивание с добавлением в базу, проблема в том что после первого действия скрипт перестаёт работать, после первого запроса уже не отсылается и не работает сортировка, вроде firebug ничего не показал

var dropped = false;
var templateHtml;
$(document).ready(function(){

function addlist(param)
 {
   $.ajax({
           url: 'index.php',
           data: 'drop='+encodeURIComponent(param),
           type: 'POST',
           dataType: 'php',
           success: function(msg)
            {       
             if(parseInt(msg)!=0)
              {
               $('#pageContent').html(msg);     
              }
            }
      });
 }
 
setSortable();
   $("#droppable").droppable({
       accept:".drop",
       drop:function(event,ui){
           dropped = true;
           addlist(ui.draggable.text());
       }
   });
 
});

function setSortable(){

       $("#sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() {
           var order = $(this).sortable("serialize") + '&action=listing';
           $.post("index.php", order, function(theResponse){
               $("#pageContent").html(theResponse);
           });                                                             
       }                                 
       });

 
   $("#sortable li").addClass("drop").bind('mousedown',function(){
       templateHtml = $("#sortable").html();
   });
}

<div  id="pageContent">

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">

</div>

</div>

Вот я зарегистрировался на бесплатном хостинге и тут видно что происходит

http://drop.netau.net/index.php

А вот вторая версия, тут я направляю на #droppable и работает, но сбивается дизайн

http://drop.netau.net/index2.php

Не можете решить эту проблему? :(

А что делает dropped = true; ?

Я а не знаю, я нашел простой скрипт который делал просто сортировку и перебрасывание вез поста. Я только начал осваивать js и решил добавить асинхронный запрос, но не получается. Вот оригинал

<script type="text/javascript">

var dropped = false;
var templateHtml;
$(document).ready(function(){

    setSortable();

    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            dropped = true;
            //alert(ui.draggable.text());
        }
    });
   
});

function setSortable(){
    $("#sortable").sortable({
        stop:function(event,ui){
            if(dropped){
                $("#sortable").sortable('destroy').html(templateHtml);
                dropped = false;
                setSortable();
            }
        }
    });
   
    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
}

    </script>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

Вот я изменил и не работает

<script type="text/javascript">

var dropped = false;
var templateHtml;
$(document).ready(function(){

function addlist(param)
{
$.ajax({
url: 'index.php',
data: 'drop='+encodeURIComponent(param),
type: 'POST',
dataType: 'php',
success: function(msg)
{
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
}
}
});
}

setSortable();
$("#droppable").droppable({
accept:".drop",
drop:function(event,ui){
dropped = true;
addlist(ui.draggable.text());
}
});

});

function setSortable(){

$("#sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=listing';
$.post("index.php", order, function(theResponse){
$("#pageContent").html(theResponse);
});
}
});


$("#sortable li").addClass("drop").bind('mousedown',function(){
templateHtml = $("#sortable").html();
});
}

</script>

<div id="pageContent">

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

</div>


<div id="droppable">

drop here

</div>

Никогда, если честно, не приходилось пользоваться такими плагами...

Почитайте о сортировщике: http://slyweb.ru/jquerydoc/sortable-options.php
и про droppable: http://slyweb.ru/jquerydoc/droppable-options.php

Вот именно что без пост запроса они работают, в оригинальном скрипте все работает, проблема появляется когда я добавляю асинхронии запрос