Hi, I am trying to dynamically generate horizontal bars for my project. I would want to make these bars draggable, but I am not able to do so. Could you please tell me how this can be done using javascript/jquery. The code written so far is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
canvas { border-bottom: thin solid; }
</style>
</head>
<body>
<p id='dothis'>Horizontal Bars</p>
<canvas id='myCanvas' width='200px' height='300px' style='border:ipx solid #c3c3c3;'>
</canvas>
<form onsubmit='return false;'>
<input type='text/javascript' id='duration'>
<button onclick='input()'>input</button>
</form>
<script type='text/javascript'>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#FF0000';
var offset = 5;
function input()
{
var duration=document.getElementById('duration').value;
ctx.fillRect(0,offset,duration,10);
offset+=20;
}
</script>
</body>
</html>