Zerlegen und Bearbeiten einer Timeline für eine Formularübergabe

Question

Mein Zweck ist es, eine bestimmte Zeitleiste in Divisionen aufzuteilen.

Meine einzige Idee, es zu tun ist durch so etwas wie dies zu tun:

Dividable timeline

Eine andere Sache, die ich möchte, dass sie durch Ziehen ein Ende auf der linken Seite in der Lage sein zu tun, die Größe oder nach rechts, Wenn dies erledigt ist, passt sich der nächste an, so dass sie den gleichen Raum einnehmen.

Jede Division kann weiter aufgeteilt werden.

das ist, was ich habe kommen mit, aber ich bin mit ihm überhaupt nicht zufrieden:

https://jsfiddle.net/syj6z05v/2/ Als

$(function() { 
    $("#resizable1").resizable({ 
     containment: "#container" 
    }); 
    $("#resizable2").resizable({ 
     containment: "#container" 
    }); 
    $("#resizable3").resizable({ 
     containment: "#container" 
    }); 
}); 

$(function() { 
    var isDragging = false; 
    var okay = 0; 
    var next; 
    $(".a") 
    .mousedown(function() { 
     okay = 1; 
     isDragging = false; 
    }) 
    .mousemove(function() { 
     if (okay == 1){ 
     next = $(".a").next(); 

     var width = 0; 
     $(this).parent().children().each(function() { 
      width += $(this).outerWidth(true); 
     }); 
     next.width(next.parent().width() - (width - next.width())); 
     isDragging = true; 
     } 
    }) 
    .mouseup(function() { 
     okay = 0; 
     isDragging = false; 
    }); 
}); 

Answer 1

in den Kommentaren diskutiert, ich glaube, bewegliche Trennwände Zugabe einfacher wäre , weil Sie die Position und Breite jedes Teils nicht neu berechnen müssen.

Ich habe ein kleines Beispiel unten gemacht. Es ist nicht perfekt, aber ich hoffe es bringt dich weiter. Sie können klicken, um einen Teiler hinzuzufügen, mit der rechten Maustaste, um einen Teiler zu entfernen, und Sie können sie ziehen, indem Sie den linken Knopf gedrückt halten.

// Dragging a handle 
 
var dragging = null; 
 
$('.timeline').on('mousedown', '.divider', function(event){ 
 
    event.stopPropagation(); 
 
    if (event.which == 1) 
 
    dragging = $(this); 
 
}); 
 

 
$('.timeline').on('mousemove', function(event){ 
 
    if (dragging) { 
 
    var left = event.offsetX; 
 
    if ($(event.target).hasClass('divider')) 
 
     left += dragging.position().left; 
 
    dragging 
 
     .css('left', left + 'px') 
 
     .attr('data-pos', left); 
 
    } 
 
}); 
 

 
$('.timeline').on('mouseup mouseenter', function(event){ 
 
    if ((event.buttons && 1) !== 1) 
 
    dragging = null; 
 
}); 
 

 
// Adding a handle 
 
$('.timeline').on('mouseup', function(event){ 
 
    if (! $(event.target).hasClass('timeline')) 
 
    return; 
 
    
 
    if (event.which == 1) 
 
    { 
 
    var left = event.offsetX; 
 
    var divider = 
 
     $('<div>') 
 
     .addClass('divider') 
 
     .css('left', left + 'px') 
 
     .attr('data-pos', left) 
 
     .appendTo(this); 
 
    } 
 
}); 
 

 
// Removing a handle 
 
$('.timeline').on('mouseup', '.divider', function(event){ 
 
    if (event.which == 2) 
 
    $(this).remove(); 
 
});

.timeline { 
 
    position: relative; 
 
    height: 20px; 
 
    border: 1px solid blue; 
 
} 
 

 
.divider { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 1px; 
 
    height: 100%; 
 
    /* Show a cursor to indicate draggability */ 
 
    cursor: ew-resize; 
 
} 
 

 
.divider::before { 
 
    /* ::Before is used to display the number */ 
 
    display: block; 
 
    position: absolute; 
 
    content: attr(data-pos); 
 
    height: 100%; 
 
    /* Since it is also a capturer for the mouse events of the divider, make sure it extends a bit to the left for easy grabbing. */ 
 
    padding-left: 6px; 
 
    left: -3px; 
 
    /* I added background color, so you can see the grabbable area. You would probably want to remove this in production */ 
 
    background-color: rgba(255, 0, 0, 0.1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Click the time line to add markers. Drag the markers to place them on the right spot. 
 
<div class="timeline"> 
 
</div>