如何在表格内制作可拖动的单元格[重复]答案

【问题标题】：How to make draggable cells inside a table [duplicate]如何在表格内制作可拖动的单元格[重复]
【发布时间】：2016-11-16 21:11:13
【问题描述】：

这个表格是用JS函数动态生成的。我需要它有可丢弃的单元格。 jQuery 函数对此不起作用。

生成单元格后，它们属于带有id = "table" 的div。

如何访问单元格？

<body>
<form>
Rows: <input type="text" id="input1"  />
Columns:<input type="text" id="input2" />
<input type="button"  value="Generate" onclick='generateTable();'></input>
</form>
<div id="table"></div>
 <script type="text/javascript">
    function generateTable() {
      var rows= document.getElementById("input1").value;
      var columns= document.getElementById("input2").value;

      var r= parseInt(rreshta);
      var c= parseInt(kolona);

      var theader = '<table>\n';
      var tbody = "";

      for(i= 0; i < r; i++){
        tbody += '<tr>';

        for (j = 0; j< c; j++){                 
            tbody += '<td id = "cell" class= "freeCell">';
            tbody += 'Cell: ' + i + ',' + j;
            tbody += '</td>';
        }
    tbody += '</tr>\n';
    }
    var tfooter = '</table>';
    document.getElementById("table").innerHTML = theader + tbody + tfooter;

    }

 $( function() {
 $( "#table td" ).draggable();
  } );
  </script
 </body>
 </html>

【问题讨论】：

已编辑以尝试在文本中查找问题。
DataTables 插件让它变得简单。

标签： javascript jquery draggable

【解决方案1】：

您可以在创建表后调用$( "#table td" ).draggable();。

function generateTable() {
      var rows= document.getElementById("input1").value;
      var columns= document.getElementById("input2").value;

      var r= parseInt(rows);
      var c= parseInt(columns);

      var theader = '<table>\n';
      var tbody = "";

      for(i= 0; i < r; i++){
        tbody += '<tr>';

        for (j = 0; j< c; j++){                 
            tbody += '<td id = "cell" class= "freeCell">';
            tbody += 'Cell: ' + i + ',' + j;
            tbody += '</td>';
        }
    tbody += '</tr>\n';
    }
    var tfooter = '</table>';
    document.getElementById("table").innerHTML = theader + tbody + tfooter;
   $( "#table td" ).draggable();

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<form>
Rows: <input type="text" id="input1"  />
Columns:<input type="text" id="input2" />
<input type="button"  value="Generate" onclick='generateTable();'></input>
</form>
<div id="table"></div>

【讨论】：

谢谢！它确实有效