设置范围时间，然后使用JavaScript / jQuery将其移动到另一个时隙时进行更新

Question

抱歉，我的标题含糊不清。 我很难把我的问题写成标题。

我想做的是有一个可以动态创建HTML表的表单（简单）。 我表单中的元素之一要求持续时间，例如1PM到2PM或1.20PM到1.56PM（仍然很容易）。

现在，我想创建一个拖放元素，使我可以上下移动行。 但是，当我这样做时，我希望时间可以相应地调整。

示例：我有三行。 第A行的时间范围设置为2PM至2.45PM。 第B行的时间范围设置为2.45PM至3.15PM。 ROW C的时间范围是3.15PM至3.30PM。

如果我要将ROW C移到ROW A之上，那么ROW C的新时间应该是2PM到2.15PM。 然后，ROW A应该调整为2.15PM至3PM。 ROW B现在应该是3PM到3.30PM。

因为用户可以分配任何小时范围，所以我认为唯一的逻辑就是使用2400号码系统列出所有24小时。 例如，而不是1PM，它将是1,300。 然后使用逻辑将1300转换为1:00 PM，以供用户查看。 501将转换为5:01 AM。 等等。

当然，有一种更干净的方法可以做到这一点。 有任何想法吗？ 谢谢！

Answer 1

我建议选择应用程序所需的最大精度（分钟或秒或更精确），并使用这些精度值表示所有数据。 您可以为每行指定一个持续时间，无论您选择哪种精度。 假设您不担心日期，则还可以以相同的精度表示开始时间，将前一天的午夜视为0。因此，从您的示例中，如果精度是分钟，则2 pm = 14（2 pm表示）。 24小时）* 60（每小时的分钟数）= 840，您的总开始时间为840。行A的持续时间为45（分钟），行B为30，行C为15-您的行看起来像[ 45，30，15]。

现在，要计算每行的开始时间和结束时间，这只是常规算法：取上一行的结束时间（或者，如果是第一行，则取总的开始时间），并添加行的持续时间以得出结束时间。 例如，行A从840开始，到885结束（840开始+ 45持续时间）。 B行从885开始，到915结束。C行从915开始，到930结束。

要将这些数字转换回HH：MM，请除以60，然后截断以得到HH（24小时；您必须对am / pm进行一些计算），并取60为模来得到分钟。 例如915的C行开始时间

Math.floor(915 / 60) // => 15 (that's 15 hours, so 3 p.m.) 
915 % 60 // => 15 (15 minutes)

将它们放在一起，您将在24小时内（即3:15 pm）获得15:15，这与您最初作为行C的开始时间所写的一样。

如果C行移到最前面，它现在开始于840（总开始时间），结束于855（840 + 15分钟的持续时间），A行开始于855，结束于900，B行开始于900，结束于930。

如果您确实需要担心日期，那么您可能要考虑从纪元开始就花费时间来掌握整个起点，然后再从那开始。

Answer 2

花了这么长时间，我头疼-服用2 Excedrin后上床睡觉，然后起床决定我要这样做。

希望能做到

    var rows = [
    {id : "1", start:1, end:4, content : "1", dur : 3},
    {id : "2", start:4, end:7, content : "2", dur : 3},
    {id : "3", start:7, end:11, content : "3", dur : 4},
    {id : "4", start:11, end:15, content : "4", dur : 4},
    {id : "5", start:15, end:16, content : "5", dur : 1},
]
    , startIndex , endIndex;

function buildTable(){
    var i = 0, l = rows.length, container = $('#tableHolder tbody'), tmpHold;
    container.html('');
    for(i; i<l; i++){
    container.append('<tr><td>From: '+ rows[i].start +' To:' + rows[i].end+ ' content : ' + rows[i].content + ' duration : ' + rows[i].dur +'</td></tr>');
    }
}
buildTable();
$( "#tableHolder tbody" ).sortable({
    start: function( event, ui ) {
        startIndex = Array.prototype.indexOf.call(ui.item[0].parentNode.childNodes, ui.item[0]);
    },
    stop: function( event, ui ) {
        endIndex = Array.prototype.indexOf.call(ui.item[0].parentNode.childNodes, ui.item[0])

        if(startIndex !== endIndex){
            rebuildArray (startIndex, endIndex)
        }
    }
}).disableSelection();

function rebuildArray(startIndex,endIndex){
    var tempVal, arrMiddle, arrStart, arrEnd, i, l, starTime;
    tempVal = rows[startIndex];
    arrMiddle =  [tempVal];
    rows.splice(startIndex,1);
    arrStart =  rows.slice(0,endIndex);
    arrEnd = rows.slice(endIndex,rows.length+1);
    rows = arrStart.concat(arrMiddle, arrEnd);
    i = 0; 
    l = rows.length;
    starTime = getEarlierStartTime();
    for(i; i<l;i++){
        starTime = updateMyTime(rows[i], starTime);
    }
    buildTable();
}

function getEarlierStartTime(){
    var i, l, earliest;
    i = 0; 
    l = rows.length;
    for(i; i<l;i++){
        if(!earliest) earliest = rows[i].start;
        if(rows[i].start < earliest) earliest = rows[i].start;
    }

    return earliest;
}

function updateMyTime(row, startTime){
    row.start = startTime;
    row.end = startTime+row.dur;
    return row.end;
}

应该是有效的示例： http : //jsfiddle.net/xgv0rc68/6/-没有对其进行过多测试。

它的作用是，无论您将行放在何处，它都会选择该行的开始时间，然后将删除行的持续时间添加到该开始时间，并将其用作下一行的开始时间，然后添加到下一行的开始时间持续时间..等等，然后重新构建整个表格。