JQuery Сортируемый не перетаскивание

Так у меня есть следующий код:JQuery Сортируемый не перетаскивание

<script> 
    $(document).ready(function(){ 
    $('#sortable').sortable({}); 
    var options = { 
    success: function(responseText) { 
     $('div.buildtable').html(responseText.data) 
     $("tbody").attr('id','sorting') 
     addButtons() 
     $('td').each(function(){ 
     var data = $('<span class="ce" contenteditable="true"></span>').html($(this).text()) 
     $(this).empty() 
     $(this).html(data) 

     }) 
    $("#sorting").sortable({}) 
    }, 
    dataType: 'json' 
    }; 

    $('#myform').ajaxForm(options); 
    }); 
</script>

<div> 
<table border="1"> 
    <thead> 
    <tr style="text-align: right;"> 
     <th>a</th> 
     <th>b</th> 
     <th>c</th> 
     <th>d</th> 
     <th>e</th> 
     <th>f</th> 
     <th>g</th> 
     <th>l</th> 
     <th>r</th> 
     <th>c</th> 
     <th>M</th> 
     <th>R</th> 
    </tr> 
    </thead> 
    <tbody id='sorting'> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.5414001697208732</span></td> 
     <td><span class="ce" contenteditable="true">0.6267579135019332</span></td> 
     <td><span class="ce" contenteditable="true">0.5372867004480213</span></td> 
     <td><span class="ce" contenteditable="true">0.28073547524400055</span></td> 
     <td><span class="ce" contenteditable="true">0.7313777771778405</span></td> 
     <td><span class="ce" contenteditable="true">0.6606377188581973</span></td> 
     <td><span class="ce" contenteditable="true">0.3469888048712164</span></td> 
     <td><span class="ce" contenteditable="true">0.3188476248178631</span></td> 
     <td><span class="ce" contenteditable="true">0.6436003404669464</span></td> 
     <td><span class="ce" contenteditable="true">0.928964062128216</span></td> 
     <td><span class="ce" contenteditable="true">0.2371064145117998</span></td> 
     <td><span class="ce" contenteditable="true">0.28258453658781946</span></td> 
    <td><span class="ce" contenteditable="true">0.9378320435062051</span></td></tr> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.9801695849746466</span></td> 
     <td><span class="ce" contenteditable="true">0.6072432077489793</span></td> 
     <td><span class="ce" contenteditable="true">0.7846700719092041</span></td> 
     <td><span class="ce" contenteditable="true">0.7305404511280358</span></td> 
     <td><span class="ce" contenteditable="true">0.6679015851113945</span></td> 
     <td><span class="ce" contenteditable="true">0.30196039425209165</span></td> 
     <td><span class="ce" contenteditable="true">0.453620670363307</span></td> 
     <td><span class="ce" contenteditable="true">0.7305374522693455</span></td> 
     <td><span class="ce" contenteditable="true">0.5768151506781578</span></td> 
     <td><span class="ce" contenteditable="true">0.13476323708891869</span></td> 
     <td><span class="ce" contenteditable="true">0.707804215606302</span></td> 
     <td><span class="ce" contenteditable="true">0.5663123105186969</span></td> 
    <td><span class="ce" contenteditable="true">0.5736047253012657</span></td></tr> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.04010314913466573</span></td> 
     <td><span class="ce" contenteditable="true">0.16257555224001408</span></td> 
     <td><span class="ce" contenteditable="true">0.09655</span></td> 
     <td><span class="ce" contenteditable="true">0.7034578064922243</span></td> 
     <td><span class="ce" contenteditable="true">0.1477506139781326</span></td> 
     <td><span class="ce" contenteditable="true">0.8663290378171951</span></td> 
     <td><span class="ce" contenteditable="true">0.7496497964020818</span></td> 
     <td><span class="ce" contenteditable="true">0.4106598789803684</span></td> 
     <td><span class="ce" contenteditable="true">0.40226005110889673</span></td> 
     <td><span class="ce" contenteditable="true">0.7200973171275109</span></td> 
     <td><span class="ce" contenteditable="true">0.3833731727208942</span></td> 
     <td><span class="ce" contenteditable="true">0.21165849990211427</span></td> 
    <td><span class="ce" contenteditable="true">0.2390481496695429</span></td></tr> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.024977961787953973</span></td> 
     <td><span class="ce" contenteditable="true">0.15549557167105377</span></td> 
     <td><span class="ce" contenteditable="true">0.4385726018808782</span></td> 
     <td><span class="ce" contenteditable="true">0.4258966601919383</span></td> 
     <td><span class="ce" contenteditable="true">0.8824008668307215</span></td> 
     <td><span class="ce" contenteditable="true">0.7984057203866541</span></td> 
     <td><span class="ce" contenteditable="true">0.41061330679804087</span></td> 
     <td><span class="ce" contenteditable="true">0.31520942342467606</span></td> 
     <td><span class="ce" contenteditable="true">0.1834968824405223</span></td> 
     <td><span class="ce" contenteditable="true">0.3562249494716525</span></td> 
     <td><span class="ce" contenteditable="true">0.6327322069555521</span></td> 
     <td><span class="ce" contenteditable="true">0.05667565925978124</span></td> 
    <td><span class="ce" contenteditable="true">0.9547795762773603</span></td></tr> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.5718567981384695</span></td> 
     <td><span class="ce" contenteditable="true">0.7837580549530685</span></td> 
     <td><span class="ce" contenteditable="true">0.2138461337890476</span></td> 
     <td><span class="ce" contenteditable="true">0.6907847372349352</span></td> 
     <td><span class="ce" contenteditable="true">0.8337705079466105</span></td> 
     <td><span class="ce" contenteditable="true">0.8015895446296781</span></td> 
     <td><span class="ce" contenteditable="true">0.6213393285870552</span></td> 
     <td><span class="ce" contenteditable="true">0.9426947564352304</span></td> 
     <td><span class="ce" contenteditable="true">0.8353719974402338</span></td> 
     <td><span class="ce" contenteditable="true">0.758063220884651</span></td> 
     <td><span class="ce" contenteditable="true">0.9910459201782942</span></td> 
     <td><span class="ce" contenteditable="true">0.7154726085718721</span></td> 
    <td><span class="ce" contenteditable="true">0.18522482318803668</span></td></tr> 
    <tr> 
     <td><span class="ce" contenteditable="true">0.554456579266116</span></td> 
     <td><span class="ce" contenteditable="true">0.6647287227679044</span></td> 
     <td><span class="ce" contenteditable="true">0.029392496217042208</span></td> 
     <td><span class="ce" contenteditable="true">0.05623618420213461</span></td> 
     <td><span class="ce" contenteditable="true">0.8104374699760228</span></td> 
     <td><span class="ce" contenteditable="true">0.9746970348060131</span></td> 
     <td><span class="ce" contenteditable="true">0.8055676252115518</span></td> 
     <td><span class="ce" contenteditable="true">0.4653796493075788</span></td> 
     <td><span class="ce" contenteditable="true">0.9834965777117759</span></td> 
     <td><span class="ce" contenteditable="true">0.45254838350228965</span></td> 
     <td><span class="ce" contenteditable="true">0.6599208291154355</span></td> 
     <td><span class="ce" contenteditable="true">0.3398332125507295</span></td> 
    <td><span class="ce" contenteditable="true">0.28924844693392515</span></td></tr> 
    </tbody> 
</table> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>

У меня есть довольно сложная проблема, которая не существует, если создать статическую страницу на JsFiddle. Все, что я пытаюсь сделать, это иметь таблицу, где я могу перемещать строки вокруг с помощью перетаскивания и редактировать ячейки, когда я нажимаю на span в пределах tr. Дело в контексте моего приложения этого не происходит. Единственная разница между статической страницей, которую я имею на JsFiddle и моим фактическим приложением, заключается в том, что table обслуживается от ответа ajax. Получив этот ответ, я делаю некоторую обработку (которую вы можете увидеть в моем скрипте). Обработка включает в себя добавление table в контейнер, добавление id в tbody, размещение данных в элементе span и добавление его обратно, и, наконец, я создал экземпляр sortable. В моем приложении содержимое диапазона доступно для редактирования, но у меня есть драп и падение строк. Кто-нибудь знает, что может быть?

источник

2015-08-12 theamateurdataanalyst