Question

我有一个包含2列的表格，第一个是时间，第二个是Dim book As Workbook Set book = Workbooks.Open("WorkbookB.xlsm") book.Save Application.Run book.Name & "!StopTimer" book.Close，另一个是class='empty'的div，我希望每当用户拖放div以准确对齐其位置时被删除的class='interview'的顶部，并将此td的类更改为td.empty

这里是我正在做的一个样本：

JS Fiddle

不幸的是，到目前为止我无法让它发挥作用，任何帮助都会受到赞赏

Answer 1

不是将可拖动元素放在td的顶部，我建议在droppable元素上触发drop事件时附加元素：

Updated Example

$('.interview').draggable({
  cursor: 'move',
  revert: 'invalid',
  helper: 'clone'
})
$('.empty').droppable({
  tolerance: 'pointer',
  drop: function(event, ui) {
    ui.draggable.appendTo(this);
  }
});

根据您的评论，如果您希望元素跨越多行，您可以添加：

table .empty {
  position: relative;
}
table .empty .interview {
  position: absolute;
  top: 0; left: 0;
}

Answer 2

您可以使用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>

如何在td顶部放置一个可拖动的div

2 个答案: