jQuery 可调整大小：在停止事件时获取第一个 td 值

Question

我有一个像日历一样的 table。

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

当您查看 table 时，您会在前 td 中找到时间。

当我开始将 div 从 08:00 调整为 09:00 时，我想获取第一个 td 具有的 tr 的索引值 09:00.

$('#resize').resizable({
    grid: 45,
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    },
    stop: function( event, ui ) {
        //*********** 
        // THIS WILL ONLY GIVE ME THE INDEX WHERE THE DIV BEGINS
        // BUT I WANT TO HAVE THE INDEX WHERE THE DIV ENDS AFTER RESIZING
        var index = $(this).parent().parent().index();
    }
});

我只能获取 div 开始的索引，即 08:00。但我想要 div 结束的索引。所以09:00。

非常感谢你们！！

编辑：

我也试过获取鼠标位置，得到最近的td和tr

与

event.pageY

我只能获取鼠标位置，但无法获取 tr 索引...

$('#test').resizable();

.dragDiv {
  background-color: #14A07D;
  background: linear-gradient(#1BD6A7, #14A07D);
  background-clip: padding-box;
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  top: 0px;
  left: 0px;
  color: #FFFFFF;
  font-weight: bold;
  white-space: pre;
  border-radius: 2px;
}

.dragDiv:hover {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  background: #ff0080;
  background: linear-gradient(#fe78ad, #ff0080);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #FFFFFF;
}

table,
th,
td {
  border-bottom: 1px dashed #f0f0ec;
  border-top: 1px dashed #f0f0ec;
  border-right: 1px solid #e9e9e4;
  border-right: 1px solid #e9e9e4;
  *height: 16px;
  font-size: 12px;
  text-align: center;
}

td {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<table name="kalender" class="kalender" id="mytable" width="100%" border="0">

  <tr height="45px">
    <td id="28800" class="uhrzeit nodroppable"><b>08:00</b></td>
    <td class="normalerTermin  solidLine">1
      <div class="dragDiv" style="height:44px; line-height:44px; font-size:12px;" id="test">TEST</div>
    </td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">2</td>
    <td class="keineArbeitszeit  solidLine droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">4</td>
    <td class="keineArbeitszeit  solidLine droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">6</td>
  </tr>
  <tr height="45px">
    <td id="30600" class="uhrzeit nodroppable">08:30</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">2</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">4</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">5</td>
    <td class="terminRightBorder  ">6
    </td>
  </tr>
  <tr height="45px">
    <td id="32400" class="uhrzeit nodroppable"><b>09:00</b></td>
    <td class="termin droppable nochKeinTermin  solidLine">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">2</td>
    <td class="termin droppable nochKeinTermin  solidLine">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">4</td>
    <td class="termin droppable nochKeinTermin  solidLine">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">6</td>
  </tr>
  <tr height="45px">
    <td id="34200" class="uhrzeit nodroppable">09:30</td>
    <td class="termin droppable nochKeinTermin  ">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">2</td>
    <td class="termin droppable nochKeinTermin  ">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">4</td>
    <td class="termin droppable nochKeinTermin  ">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">6</td>
  </tr>
</table>

Answer 1

这样就可以了

// get the bottom coordinate of the resized DIV 
var y = ($(this).offset().top + ui.size.height);

// get the x coordinate
var x = $(this).offset().left;

// get all elements below the calculated point
var elem = document.elementFromPoint(x, y);

// get the element "tr" of all elements and fetch the ID
var time = $('td:first', $(elem).parents('tr')).attr('id');

jQuery 可调整大小：在停止事件时获取第一个 td 值

jQuery resizable: get first td value at stop event

jquery

resizable