jQuery resizable:在stop事件中获取第一个td值

Question

我有一个类似日历的表。

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

当你查看表格时，你会发现第一个td的时间。

当我开始将div的大小从08:00调整到09:00时，我想获得tr的索引，其中第一个td的值为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');