draggable 相关问题

我正在使用jquery同时将两个元素div拖放到具有九个单元格（网格）的表格中，这是代码，超文本标记语言我正在使用 jquery 在具有九个单元格（网格）的表格中同时拖放两个元素 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"> </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> 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 中的项目代码我很高兴听到一些建议，谢谢。要允许您的盒子容纳多个元素，您需要更改接受子句以允许任何具有 .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>

javascript jquery draggable jquery-ui-droppable

回答 1 投票 0

jquery ui 可拖动元素出现在其他元素后面？

我正在使用 jquery ui 可拖动，并最终可放置，以便可以将图片重新排序到不同的框中。当我将图片拖出框中时，它会出现在所有其他元素下方......

jquery-ui drag-and-drop draggable jquery-draggable

回答 4 投票 0

当用户点击它时，将可拖动的 div 带到 React.js 的前面

我想在单击或拖动它时将可拖动的框带到前面。我事先不知道此类框的最大数量，因为我有一个按钮可以在...

reactjs z-index draggable

回答 1 投票 0

ReactSortable 渲染嵌套组件？

我的目的是实现将元素从一个列表拖动到另一个列表，例如：将layout2元素（有2个嵌套块）拖到编辑器中。将段落拖到两个布局块之一中。 ...