JSFiddle - React, Tailwind, and code Playground

by zarwa

HTML

<body>
    <div id="scroll-container">
        <div id="tache-container">
            <table>
                <tbody>
                    <tr></tr>
                </tbody>
            </table>
            <div id="tache1" class="tache"><h1>Tache 1</h1>Je suis draggable mais pas repositionné</div>
            <div id="tache2" class="tache"><h1>Tache 2</h1>Je suis draggable et repositionné</div>
        </div>
        <div id="scroll-event-left-area" class="scroller">Drag sur moi pour scroller</div>
        <div id="scroll-event-right-area" class="scroller">Drag sur moi pour scroller</div>
    </div>
</body>

CSS

#scroll-container{
    height: 250px;
    width: 400px;
    overflow: hidden;
}
.scroller{
    position: relative;
    background-color: yellow;
    opacity: 0.5;
    height: 250px;
    width: 50px;  
    top: -200px;  
}
#scroll-event-left-area{
    top: -250px;
}
#scroll-event-right-area{
    top: -500px;
    left: 350px;
}
#tache-container{
    position: relative;
    height: 250px;
    width: 800px;
    left: -200px;
}
#tache-container table tbody tr td{
    border-left: solid 1px black;
    height: 250px;
    width: 20px;
}
.tache{
    position: relative;
    height: 100px;
    width: 87px;
    background-color: white;
    left: 360px;
    border: 1px solid black;
}
.tache h1{
    margin: 0px;
    font-size: 14px;
}
#tache1{
    top: -250px;
}
#tache2{
    top: -215px;
}

JavaScript

$(document).ready(function(){
    var strLine = '';
    for(var i = 0; i < 40; i++){
        strLine += '<td>' + i + '</td>';
    }
    $('#tache-container').find('tr').append(strLine);
    var scrollable = false;
    var mouseOnDivScroll = false;
    var draggedElement = null;
    $('#tache1').draggable({
        axis: 'x',
        snap: true,
        snap: 'td',
        snapMode: 'inner',
        containment: 'parent',
        refreshPositions: true,
        start: function(event, ui){
            scrollable = true;
            draggedElement = null;
        },
        stop: function(event, ui){
           scrollable = false;
        }
    });
    $('#tache2').draggable({
        axis: 'x',
        snap: true,
        snap: 'td',
        snapMode: 'inner',
        containment: 'parent',
        refreshPositions: true,
        start: function(event, ui){
            scrollable = true;
            draggedElement = this;
        },
        stop: function(event, ui){
           scrollable = false;
        }
    });
    $('#scroll-event-left-area').mouseenter(function(event){
        mouseOnDivScroll = true;
        scroll(4);
    });
    $('#scroll-event-left-area').mouseleave(function(event){
        mouseOnDivScroll = false;
    });    
    $('#scroll-event-right-area').mouseenter(function(event){
        mouseOnDivScroll = true;
        elementDragge = this;
        scroll(-4);
    });
    $('#scroll-event-right-area').mouseleave(function(event){
        mouseOnDivScroll = false;
    });
    var scroll = function(inc){
        if(scrollable && mouseOnDivScroll){            
            $('#tache-container').offset({left: $('#tache-container').offset().left + inc});
            if(draggedElement !== null){
                $(draggedElement).offset({left: $(draggedElement).offset().left + inc * -1});
            }
            setTimeout(scroll, 50, inc);
        }
    };
});