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

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

本文关键字：之间两个单元格动态拖放更新时间：2023-09-26

在我的项目中，我必须制作一个图形界面，并使用拖放来添加项目。我需要两个由用户输入生成的表，我应该将一个表的单元格拖动到另一个表的单元格中，当我这样做时，我还需要更改丢弃的单元格的属性，如类或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>

使用此提琴

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>