拖放動態生成的兩個表格之間的所有單元格

在我的項目中，我必須創建一個圖形界面並使用拖放來添加項目。我需要兩個由用戶輸入生成的表格，我應該將表格的單元格拖到另一個表格的單元格中，當我這樣做時，還需要更改放置單元格的屬性，例如類或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

拖放動態生成的兩個表格之間的所有單元格

回答

相關問題