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>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
 canvas { border-bottom: thin solid; }

<p id='dothis'>Horizontal Bars</p>

<canvas id='myCanvas' width='200px' height='300px' style='border:ipx solid #c3c3c3;'>

<form onsubmit='return false;'>

  <input type='text/javascript' id='duration'>
  <button onclick='input()'>input</button>

<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;




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