我有一个包含2列的表,第一列是时间,第二列是class='empty',另一个div是class='interview',我希望每当用户拖放div时,它的位置就精确地位于td.empty的顶部被丢弃,并将此td的类更改为occupied

这里是我在做什么的一个样本:

JS Fiddle

不幸的是,到目前为止,我尚无法解决此问题,我们将不胜感激

最佳答案

您可以使用jQuery UI position()方法,如下所示:



$(document).ready(function() {
  $('.interview').draggable({
    cursor: 'move',
    revert: 'invalid',
  })
  $('.empty').droppable({
    drop: function(ev, ui) {
      $(this).removeClass('empty').addClass('occupied');
      ui.draggable.position({
        my: 'left top',
        at: 'left top',
        of: this
      });
    }
  })
})

table {
  border-collapse: collapse;
  border: 1px solid #333;
}

table td {
  border: 1px solid #c1a1a1 !important;
}

table .time {
  width: 60px;
  font-family: 'Calibri'
}

table .empty {
  width: 180px;
}

.interview {
  border: 1px solid #ddd;
  background-color: e1a2c1;
  height: 35px;
  width: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table>
  <tr>
    <td class='time'>09:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>10:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>11:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>12:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>13:00</td>
    <td></td>
  </tr>
  <tr>
    <td class='time'>14:00</td>
    <td class='empty'></td>
  </tr>
</table>

<div class='interview'>
  This test
</div>

关于jquery - 如何将可拖动的div放置在td的顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34426864/

10-12 13:07
查看更多