有没有一种方法可以使用jQuery在一个表中同时拖放两个元素(div)

ilmyapht 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(106)

我正在使用jquery，并试图同时拖放两个元素div，作为一个具有九个单元格（网格）的表格中的一个单独的div，下面是代码，

HTML格式

<table border="1" class="mainTable">
  <tr>
    <td id="11">
      <div class="dragDiv" id="1"></div>
    </td>
    <td id="12"><div class="dragDiv" id="2"></div></td>
    <td id="13">&nbsp;</td>
  </tr>
  <tr>
    <td id="21">&nbsp;</td>
    <td id="22">
      &nbsp;
    </td>
    <td id="23">&nbsp;</td>
  </tr>
  <tr>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">
      &nbsp;
    </td>
  </tr>
</table>

字符串

CSS

.mainTable {
  margin: 20px auto;
  padding: 0px;
}
.mainTable tr td {
  width: 100px;
  height: 100px;
}
.dragDiv {
  text-align: center;
  background-color: #00ABA9;
  height: 50px;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 100%;
}

型

jquery

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: function() {
      return $(this).find("*").length == 0;
    },
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable.css({
        /* manually append the element
                and reset positioning */
        top: 0,
        left: 0
      }));
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 100, "easeOutBack");
        }
      });
    }
  });
});

型
我尝试了很多答案，我发现在这个网站上像这个答案here和here和这么多这是我的项目代码在Codepen我会很高兴听到一些建议，谢谢。

jquery

来源：https://stackoverflow.com/questions/77642289/is-there-a-way-to-drag-and-drop-two-elements-divs-simultaneously-inside-a-tabl

1条答案

按热度按时间

llmtgqce1#

为了允许你的盒子容纳多个元素，你需要修改accept子句，允许类为.dragDiv的任何元素。
正如你在附加的代码片段中看到的，你现在可以在同一个框中有两个元素。
（我还添加了一些flexbox样式，并删除了一些不需要的样式，以清理CSS，同时保持元素在其容器中居中）。

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: ".dragDiv",
    drop: function(event, ui) {
      var $this = $(this);
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 100, "easeOutBack");
        }
      });
    }
  });
});

.mainTable {
  margin: 20px auto;
  padding: 0px;
}

.mainTable tr {
  display: flex;
  flex-flow: row;
}

.mainTable tr td {
  width: 100px;
  height: 100px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.dragDiv {
  background-color: #00ABA9;
  height: 50px;
  width: 100%;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>

<body>
  <table border="1" class="mainTable">
    <tr>
      <td id="11">
        <div class="dragDiv" id="1"></div>
      </td>
      <td id="12">
        <div class="dragDiv" id="2"></div>
      </td>
      <td id="13"></td>
    </tr>
    <tr>
      <td id="21"></td>
      <td id="22"></td>
      <td id="23"></td>
    </tr>
    <tr>
      <td id="31"></td>
      <td id="32"></td>
      <td id="33"></td>
    </tr>
  </table>
</body>

</html>

赞(0）回复(0）举报 12个月前

我来回答

有没有一种方法可以使用jQuery在一个表中同时拖放两个元素(div)

1条答案

相关问题

热门标签

最新问答