单击并滑动时如何为 td 着色？

Question

我有一个测试div ，当将div拖放到选项卡中时，我可以将它拖到表中，我将目标<td>着色为蓝色。 现在，当我单击、按住并滑动到蓝色<td>的右侧或左侧时，我想使所有其他 td beeing 着色，例如调整大小。

所以我的问题是：如何“调整”我的蓝色<td> ？ “调整大小”不是一个好词，因为我想通过单击并像调整大小一样向右或向左滑动来模拟它为其他<td>着色，如果您有线索/方法可以遵循，我将不胜感激。

我尝试使用 jquery ui resizable 将div直接放在td中，但我不能用它做我想要的（我想？）

请看一下代码片段，很难解释我想从 jQuery 得到什么。

提前感谢

 $(function () { // There's the gallery and the trash var $job = $("#testblocks"), $ressource = $(".ressource"); // Let the gallery items be draggable $("div", $job).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: ".containment-wrapper", helper: "clone", cursor: "move", snap: "td", scroll: false, refreshPositions: true, drag: function () { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; /*$('#posX').text('x: ' + xPos); $('#posY').text('y: ' + yPos);*/ } }); /*$("div", $job).resizable({ handles: 'e, w', containment: ".containment-wrapper" });*/ $ressource.droppable({ hoverClass: 'hovering', tolerance: 'pointer', accept: "#testblocks > div, .ressource div", classes: { "ui-droppable-active": "ui-state-highlight" }, drop: function (event, ui) { //$(ui.draggable).appendTo($(this)); $(this).css("background-color", "blue"); $(this).next("td").css("background-color", "blue"); $(this).next("td").next("td").css("background-color", "blue"); $(this).next("td").next("td").next("td").css("background-color", "blue"); } }); $job.droppable({ accept: ".ressource div", classes: { "ui-droppable-active": "custom-state-active" }, drop: function (event, ui) { $(ui.draggable).appendTo($job); } }); });

 .drag { height: 49px; width: 60px; text-align: center; } td { border: 1px solid black; /*height:50px;*/ width: 160px; } th { border: 1px solid black; /*height:50px;*/ width: 180px; } tr { border: 1px solid black; height: 150px; }.basr { height: 150px; }.masterContent { padding: 0; margin: 0; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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> <table cellspacing="0" style="border:1px solid black; text-align:center;"> <tr style="border:1px solid black;"> <th style="border:1px solid black;"></th> <th style="border:1px solid black;">Lundi</th> <th style="border:1px solid black;">Mardi</th> </tr> </thead> <tbody> <tr> <th>Ressource 1</th> <td colspan="6" rowspan="4" class="masterContent"> <table cellspacing="0" style="border:0;width:100%;" class="containment-wrapper"> <tr> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> </tr> <tr> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> <td><table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table></td> </tr> <tr class="basr"> <td colspan="26" id="testblocks"> <div class="ui-widget-content ui-corner-tr drag"> test </div> </td> </tr> </table> </td> </tr> <tr> <th>Ressource 2</th> </tr> <tr class="basr"> <th>bac à sable</th> </tr> </tbody> </table>

Answer 1

这是我建议的一个例子。 由于您无法调整单元格的大小，因此您需要放置一些东西来充当代表。 考虑以下代码。

 $(function() { // There's the gallery and the trash var $job = $("#testblocks"), $ressource = $(".ressource"); $("div", $job).draggable({ cancel: "a.ui-icon", revert: "invalid", containment: ".containment-wrapper", helper: "clone", cursor: "move", snap: "td", scroll: false, refreshPositions: true, drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; /*$('#posX').text('x: ' + xPos); $('#posY').text('y: ' + yPos);*/ } }); $ressource.droppable({ hoverClass: 'hovering', tolerance: 'pointer', accept: "#testblocks > div, .ressource div", classes: { "ui-droppable-active": "ui-state-highlight" }, drop: function(event, ui) { //$(ui.draggable).appendTo($(this)); var i = $(this).index(); var p = i - 1; var n = i + 1; var t = $(this); var r = t.parent(); t.add($("td", r).eq(n)).add($("td", r).eq(++n)).add($("td", r).eq(++n)).addClass("marked"); n++; $("<div>", { class: "ghost for" }).css({ width: t.width(), height: t.height() }).appendTo("body").position({ my: "left top", at: "left top", of: $(".marked:first", r) }).resizable({ handles: "w", resize: function(e, ui) { if (ui.position.left < $("td", r).eq(p).position().left) { $("td", r).eq(p--).addClass("marked"); } ui.size.width = t.width(); } }); $("<div>", { class: "ghost aft" }).css({ width: t.width(), height: t.height() }).appendTo("body").position({ my: "left top", at: "left top", of: $(".marked:last", r) }).resizable({ handles: "e", resize: function(e, ui) { var f = ui.position.left; if (ui.position.left < $("td", r).eq(n).position().left) { $("td", r).eq(n++).addClass("marked"); } ui.size.width = t.width(); } }); } }); $job.droppable({ accept: ".ressource div", classes: { "ui-droppable-active": "custom-state-active" }, drop: function(event, ui) { $(ui.draggable).appendTo($job); } }); });

 .drag { height: 49px; width: 60px; text-align: center; } td { border: 1px solid black; /*height:50px;*/ width: 160px; } th { border: 1px solid black; /*height:50px;*/ width: 180px; } tr { border: 1px solid black; height: 150px; }.basr { height: 150px; }.masterContent { padding: 0; margin: 0; }.marked { background-color: blue; }.ghost { border: 0; background: transparent; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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> <table cellspacing="0" style="border:1px solid black; text-align:center;"> <thead> <tr style="border:1px solid black;"> <th style="border:1px solid black;"></th> <th style="border:1px solid black;">Lundi</th> <th style="border:1px solid black;">Mardi</th> </tr> </thead> <tbody> <tr> <th>Ressource 1</th> <td colspan="6" rowspan="4" class="masterContent"> <table cellspacing="0" style="border:0;width:100%;" class="containment-wrapper"> <tr> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> </tr> <tr> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> <td> <table cellspacing="0" style="border:0;"> <tr style="border:0;"> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> <td style='border:0;' class='ressource'></td> </tr> </table> </td> </tr> <tr class="basr"> <td colspan="26" id="testblocks"> <div class="ui-widget-content ui-corner-tr drag"> test </div> </td> </tr> </table> </td> </tr> <tr> <th>Ressource 2</th> </tr> <tr class="basr"> <th>bac à sable</th> </tr> </tbody> </table>

我们使用 Class 来简单地标记单元格或突出显示它们。 我们还添加了不属于表格的伪句柄。 当我们调整大小时，我们可以保留大小，但只需查看位置以确定当我们朝一个方向移动时要标记哪些单元格。