0

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>
1
Contributor
1
Reply
9
Views
3 Years
Discussion Span
Last Post by prancode
0

I forgot to mention that I want to drag the bars horizontally.
Thanks in advance.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.