jQuery resizable: get first td value at stop event

Question

I have a table that is like a calendar.

Please have a look at the code snippet, it is hard to explain what I want to get from jQuery.

When you have a look at the table you will find times in the first td's.

When I start resizing the div from 08:00 to 09:00, I want to get the index of the tr where the first td has the value 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();
    }
});

I only can fetch the index where the div begins, that would be 08:00. But I want to have the index where the div ends. So 09:00.

Thank you very much guys!!

EDIT:

I also tried to get the mouse position and get the closest td and tr

With

event.pageY 

I only get the mouse position but I am unable to get to the tr index...

$('#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

This does the trick

// 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');