拖放动态生成的两个表格之间的所有单元格

在我的项目中，我必须创建一个图形界面并使用拖放来添加项目。我需要两个由用户输入生成的表格，我应该将表格的单元格拖到另一个表格的单元格中，当我这样做时，还需要更改放置单元格的属性，例如类或id。另外我需要选择多个并修改或删除掉落的单元格。如果一个单元格被丢弃，它也应该从拖动它的单元格中移除。拖放动态生成的两个表格之间的所有单元格

我试着用下面的代码;我可以移动一个单元格，但是被拖动的单元格的类别不会更改，我无法从拖动的单元格中移动它。请帮忙吗？

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #chair { width: 11px; height: 11px; padding: 0.5em; float: left; margin: 10px; background-color: red; } 
    #cells { width: 11px; height: 11px; padding: 0.5em; float: left; margin: 10px; background-color: green; } 
    #table { width: 50%; float: left; } 
    #chairs{width: 50%; float: right;} 
    .dragged { width: 5px; height: 5px; padding: 0.5em; float: left; margin: 10px; background-color: blue ; } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    </head> 

    <body> 
     <div id = "table"></div> 
     <div id = "chairs"></div> 
     generate cells : 

     <input type="button" value="generate" onclick='generateZone();'></input>  

     generate chair : 

     <input type="button" value="chair" onclick='generateChairs();'></input> 

     <script type="text/javascript"> 
     function generateZone(){ 

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

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

      for (j = 0; j< 5; j++){     
      tbody += '<td id = "cells" class = "freeCell" >'; 
      tbody += i + ',' + j; 
      tbody += '</td>'; 
      } 
     tbody += '</tr>\n'; 
     } 

     var tfooter = '</table>'; 

     document.getElementById("table").innerHTML = theader + tbody + tfooter; 
     $("#table #cells").droppable({ 
      drop : function(event, ui){ 
      $(this) 
      .addClss("dragged") 
      .find("#chair");    
      } 
     }); 
     } 

     </script> 

     <script type="text/javascript"> 
     function generateChairs(){ 
      var header = '<table>\n'; 
      var body = ""; 

      for(n= 0; n < 5; n++){ 
      body += '<tr>'; 

      for (m = 0; m< 5; m++){    
      body += '<td id = "chair" class = "AvailableCell" >'; 
      body += n + ',' + m; 
      body += '</td>'; 
      } 
     body += '</tr>\n'; 
     } 

     var footer = '</table>'; 
     document.getElementById("chairs").innerHTML = header + body + footer; 
     $("#chairs #chair").draggable(); 

     } 
     </script> 
    </body> 

    </html>

来源

2016-11-17 Hermione

使用本fiddle

HTML + CSS + JS：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <!-- jQuery library --> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <style> 
     #chair { width: 11px; height: 11px; padding: 0.5em; float: left; margin: 10px; background-color: red; } 
     #cells { width: 11px; height: 11px; padding: 0.5em; float: left; margin: 10px; background-color: green; } 
     #table { width: 50%; float: left; } #chairs{width: 50%; float: right;} 
     .dragged { width: 5px; height: 5px; padding: 0.5em; float: left; margin: 10px; background-color: blue ; } 
     .freeCell { 
      background-color: blue ; 
      width: 35px; height: 35px; 
      margin:2px 2px 2px 2px; 
     } 
     .availableCell { 
      background-color: red ; 
      width: 35px; height: 35px; 
      margin:2px 2px 2px 2px; 
     } 
    </style> 
</head> 
<body> 
    <div id="table"></div> 
    <div id="chairs"></div> 
    generate cells : 

    <input type="button" value="generate" onclick='generateZone();'/> 


    generate chair : 

    <input type="button" value="chair" onclick='generateChairs();'/> 


    <script type="text/javascript"> 
     function generateZone(){ 

      var theader = $('<table id="newtable"></table>'); 
     var tbody = ""; 

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

      for (j = 0; j< 5; j++){ 


       tbody += '<td><div class = "freeCell">'; 
      tbody += i + ',' + j; 
      tbody += '</div></td>'; 
      } 
      tbody += '</tr>\n'; 
      theader.html(tbody); 
      tbody = ''; 
     } 
     $('#table').html(theader); 
     //alert(theader.find('.freeCell').attr('id')); 
     //$("table").innerHTML = theader + tbody + tfooter; 
     $('.freeCell').droppable({ 
      drop : function(event, ui){ 
       $(this) 
       .addClass("dropped!"); 
      //.find("#chair"); 

      } 
     }); 


     } 

    </script> 

    <script type="text/javascript"> 
     function generateChairs(){ 
      var header = $('<table id="chairtable"></table>'); 
      var body = ""; 

      for(n= 0; n < 5; n++){ 
      body += '<tr>'; 

      for (m = 0; m< 5; m++){ 


       body += '<td><div class = "availableCell">'; 
      body += n + ',' + m; 
      body += '</div></td>'; 
      } 
      body += '</tr>\n'; 
      header.html(body); 
      body = ''; 
     } 
      $('#chairs').html(header); 
     //var footer = '</table>'; 

     //$("chairs").innerHTML = header + body + footer; 
     $('.availableCell').draggable({ revert: 'invalid' }); 

     } 
    </script> 
</body> 

</html>

来源

2016-11-17 12:19:27 RonyLoud

拖放动态生成的两个表格之间的所有单元格

回答

相关问题