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

Question

在我的项目中，我必须制作一个图形界面并使用拖放来添加项目。我需要两个由用户输入生成的 table，我应该将一个 table 的单元格拖到另一个 table 的单元格中，当我这样做时，我还需要更改属性个丢弃的单元格，例如 class 或 id。我还需要 select 多个并修改或删除掉落的单元格。如果一个单元格被放下，它也应该从拖动它的单元格中删除。

我试过下面的代码；我可以移动一个单元格，但是被拖动的单元格的 class 不会改变，我不能再从被拖动的单元格中移动它。请帮忙？

  <!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>

Answer 1

使用这个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>

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

Drag and drop all the cells between two tables that are generated dynamically

javascript

jquery

drag-and-drop

cells