jquery - 在表格上方的正确位置放置一个 div

Question

我正在尝试构建一个调度程序，这是要求

1. 显示每个资源的工作时间
2. 显示采访并允许使用调整大小选项更改采访持续时间，并允许使用可拖放的方式移动采访

我在以下方面需要帮助:

1. 建立时间表后，如何将每个采访都放在时间表的顶部正确位置
2. 如果有很多日程排在一起，是否可以将面试从日程 i 拖到日程 j？

$.fn.scheduler = function(options) {
  var context = $(this)
  var resources = {
      start: null,
      end: null,
      ownerId: null,
      ownerName: null,
      duration: 15, // 15 minutes,
      interviews: []
    }
    // build the scheduler

  function build() {
    if (options !== null && options !== undefined)
      $.extend(resources, options)
    var start = resources.start
    var end = resources.end
    var table = $('<table>')
    var temp = start
    console.log(start)
    while (temp < end) {
      console.log(temp)
      var tr = $('<tr>')
      var time = $('<td>')
      time.addClass('time')
      time.html(temp.getHours() + ':' + temp.getMinutes())
      tr.append(time)
      var event = $('<td>')
      event.addClass('event')
      tr.append(event)
      tr.appendTo(table)
      temp.setMinutes(temp.getMinutes() + resources.duration)
    }
    context.append(table)
  }
  build()
}
$(document).ready(function() {
  $('.scheduler').scheduler({
    start: new Date(2015, 11, 21, 9, 0, 0),
    end: new Date(2015, 11, 21, 17, 0, 0),
    ownerId: 1196,
    interviews: [{
      id: 111,
      start: new Date(2015, 11, 21, 11, 35, 0),
      duration: 45
    }]
  })
})

.scheduler {
  height: 200px;
  overflow-y: scroll;
}
.scheduler table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  ;
}
table {
  font-size: 1.0em;
}
table td {
  height: 20px;
  border-bottom: 1px solid #ddd;
}
table td.time {
  border-right: 1px solid #ddd;
}
.time {
  width: 70px;
  font-weight: bold;
  color: #c1c1c1;
}
.event {
  width: 160px;
}
.interview {
  position: absolute;
  width: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='scheduler'>

</div>

JSFIDDLE

Answer 1

对于问题的第一部分，请尝试以下操作:

1- 按如下方式更新您的 css

.scheduler{
    font-family: Calibri;
    position: relative;
    height: 400px;
    overflow-y: scroll;
}
.interview {
    position: absolute;
    background-color: aqua;
    opacity: 0.5;
    width: 160px;
    border:1px solid #808080;
}

2- 将以下 JS 函数添加到您的调度程序

function showInterviews() {
        for (var interview in resources.interviews) {
            var iw = resources.interviews[interview]
            var timeStart = iw.start.getHours() * 60 + iw.start.getMinutes()
            var timeEnd = timeStart + iw.duration
            var result = context.find('.time').filter(function () {
                return $(this).data('start') <= timeEnd && $(this).data('end') >= timeStart;
            })
            if (result.length > 0) {
                var first = result.first().next()
                var position = first.position()
                console.log(first.css('font-size'))
                var div = $('<div>')
                div.addClass('interview')
                div.attr('start', timeStart)
                div.attr('end', timeEnd)
                div.attr('duration', iw.duration);
                div.css('top', position.top + 1)
                div.css('width', first.width()+1)
                div.css('height', (result.length - 1) * 24  - result.length)
                div.css('left', position.left + 1)
                div.appendTo(context)
            }
        }
    }

3- 更新构建函数以存储 start和 end数据属性中的时间

var timeStart = temp.getHours() * 60 + temp.getMinutes()
var timeEnd = timeStart + resources.duration
time.attr('data-start', timeStart)
time.attr('data-end', timeEnd)

解释:

I- 如何找到采访 div 和日程表之间的交集，特别是我们正在处理时间段

1. 将每个时隙转换为分钟(Hour * 60 + minutes)作为开始，并通过start + duration计算时隙的结束
2. 找到与采访开始和结束相交的常见 tds ( td.start <= interview.end and td.End>=interview.start
3. 排除结果中的最后一个时间段开始时间 = 上一个时间段结束时间

II- 获取结果中的第一个元素并在第一个 td 元素位置更新您的采访顶部和左侧。

III - 我不知道为什么值 24 在那里，我试过 (first.height() + result.length)而不是 24 但它没有给出预期的结果，也许有人可以帮助清除这一点。

这里是工作 demo

希望对你有帮助