Question

所以我有以下代码：

<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.09655012399889529</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。在我的应用程序中，我的span内容是可编辑的，但我有drap和drop行。任何人都知道可能会发生什么？

Answer 1

你可以这样做：

$('table').sortable({ items: 'tr' });

参见示例：http://jsfiddle.net/ddan/mekayx28/1/

jQuery Sortable不拖放

1 个答案: