jquery-ui-droppable 相关问题

我正在使用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 可以通过“accept”选项删除，因为函数被忽略了

我正在使用 jQueryUI 1.12.1 尝试使一些元素可删除。当没有指定选项时，这是有效的，但是当我尝试使用“接受”选项时，

javascript jquery-ui-droppable

回答 1 投票 0

jQuery UI：可选择嵌套元素（父容器可拖动）

我结合了jQuery draggable, selectable and droppable并且它工作正常，但是我遇到了以下问题（见下图）：我想对嵌套项目使用 selectable 来拖动它们

jquery-ui jquery-ui-draggable jquery-ui-droppable jquery-ui-selectable

回答 0 投票 0

放下前检查。 jQuery拖放

我是JQuery的初学者，我真的不知道该怎么做...我只需要在代码相等时才允许删除，例如，'Limone Salmone'只能放在'Alessandro附近...