jQuery UI: Draggable

Draggable Elements

by Florent27000

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<canvas id="myCanvas" width="200" height="20"
style="border:1px solid #c3c3c3; padding-left:100px;">
Your browser does not support the canvas element.
</canvas>

Vue

var canvas = $("#myCanvas");
var ctx = $("#myCanvas")[0].getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(-10,0,20,20);
ctx.fillRect(180,0,20,20);
ctx.fillStyle = "#ffc107";
ctx.fillRect(20,0,20,20);
ctx.fillRect(160,0,20,20);
ctx.fillStyle = "#47B155";
ctx.fillRect(40,0,120,20);


ctx.fillStyle = "#000000";
ctx.fillRect(98,0,2,20);