JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<!DOCTYPE html>
<html>
<head>
    <title>ZEN - HTML5-CSS3 Audio Player</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1;"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
</head>
<body>
    
    
    <div id="scrubContainer"><div id="drop"><div class="waveDrag"></div></div></div>

    <div id="dragpos"></div>
    <div id="droppos"></div>
</body>
</html>

CSS

#scrubContainer {
    display: inline-block;
    position: relative;
    width:100%;
    height: 60px;
    border: 1px solid;
    clear:both;
    float:left;
}

.waveDrag {
    width:1800px;
    height: 60px;
    top:0px;
    position:absolute;
    background:grey;
    clear:both;
}

#drop {
    top:0px;
    position:relative;
    left:50%;
    width:1px;
    height:120px;
    background:red;
}

JavaScript

// duration 240 secs
// width 1800
$(document).ready(function(){    

    $(".waveDrag").draggable({
        axis: "x",
        start: function(event) {

        },
        drag: function(event, ui) {
                //console.log(event.offsetX);
                console.log(ui.position.left);
                console.log(ui.offset.left);
                var time = 240 / 1800 * ui.position.left;
                $("#dragpos").html("LEFT FROM MARKER " + ui.position.left);
                $("#droppos").html("TIME " + Math.abs(time) + "secs");
        },
        stop: function(event, ui){
 
        }
    });

    
});