Question

我在尝试创建一个在响应式网站中具有通用性的公式时遇到了麻烦。我正在使用Bootstrap。

具体来说，我有一个＆＃34;时间表＆＃34;在边界div内的div。我有它，所以它是可拖动的。我试图让它在到达时间轴两侧的特定点时停止拖动。

请在此处查看：Draggable Timeline

将时间线向右拖动到第一年是没有问题的。我有那个工作。它停止拖动到它应该的位置。

但是，将时间轴拖到去年，它会根据窗口大小停止在不同的位置拖动。

当我认为我在一个窗口大小工作时，我调整了窗口的大小，它已关闭。

在下面的图片中，这是我想要达到的最终结果。时间线的两端应该有15px的余量。

开始位置：（工作）

结束位置（不工作）

时间轴由javascript动态生成。但是对于这个问题，我们将保持宽度为5000.4px。

这是我的HTML：

 <div id="timeline-border" class="timeline-border">
      <div id="timeline" class="timeline">
      </div><!-- end timeline -->
 </div><!-- end timeline-border -->

这是我的滚动代码。

var timeline = document.getElementById("timeline");
    //set timeline width
    var timelineWidth = (numOfMonths*16.668);

    timeline.setAttribute("style","width:"+timelineWidth+"px;");
    var zIndex = 0;

    //timeline width: 5000.4
    console.log("timelineWidth: "+timelineWidth);

    // timeline parent width: 750
    var timelineBorderWidth = document.getElementById("timeline-border").offsetWidth;
    console.log("timelineBorderWidth: "+timelineBorderWidth);

    //timelineVisible: 735
    var timelineVisible = timelineBorderWidth - 15;
    console.log("timelineVisible: "+timelineVisible);

    //timeline hidden length: 4265.4
    var timelineHidden = timelineWidth - (timelineBorderWidth-15);
    console.log("timelineHidden: "+timelineHidden);

    //timeline offset left: 96.5
    var timelineLeftPos = $("#timeline").offset().left;
    console.log("timelineOffsetLeft: "+timelineLeftPos);

    //timeline offset left: 81.5
    var timelineLeftPosition = $('#timeline').position().left;
    console.log("timelineLeftPosition: "+timelineLeftPosition);

    //timeline offset from parent: 16
    var elem = $("#timeline");
    var offset = elem.offset().left - elem.parent().offset().left;
    console.log("timeline offset from parent: "+offset);

    // magicXNum: -4361.9
    var magicXNum = timelineHidden + timelineLeftPos;
    console.log("magicXNum: -"+magicXNum);


$( "#timeline" ).draggable({
        axis: 'x',
        scroll: false,
        drag: function(event, ui) {
            var offset = $(this).offset();
            var xPos = offset.left;
            $('#posX').text('#timeline offset.left: ' + xPos);

                if (ui.position.left >= 0) {
                    ui.position.left = 0;
                } else if (ui.position.left <= -magicXNum){ //small size -4632){
                    ui.position.left = -magicXNum;// small size -4632;
                }
            },
            stop: function(event, ui) {

            }
    });

这是控制台输出。

timelineWidth: 5000.4
timelineBorderWidth: 750
timelineVisible: 735
timelineHidden: 4265.4
timelineOffsetLeft: 96.5
timelineLeftPosition: 81.5
timeline offset from parent: 16
magicXNum: -4361.9

Answer 1

转到第53行：在那里做一些减法和加法：

Line 53: var magicXNum = timelineWidth - timelineBorderWidth + 30;

现在每次用户拉伸窗口时都必须更新..

所以你的MagicXNumber现在是一个动态 MagicXNumber，在下面加上这个第53行：

$(window).resize(function() {
    timelineBorderWidth = document.getElementById("timeline-border").offsetWidth;
    magicXNum = timelineWidth - timelineBorderWidth + 30;
    console.log("magicXNum: "+magicXNum);
});

Bootstrap使得时间线在伸展时跳出位置。

您要在日历上添加标记吗？那么当它跳跃时，时间线将自己置于标记中心？

具体的开始和结束＆＃39; x＆＃39;父div中具有overflow：hidden

1 个答案: