<canvas id="canvas"></canvas>
<div id="start">Drag me!</div>
<div id="end">No, drag me!</div>
body {
height: 100vh;
margin: 0;
overflow: hidden;
background: #333;
}
div {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
background: ivory;
font-family: 'Segoe UI', sans-serif;
border-radius: 5px;
cursor: grab;
user-select: none;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.5);
}
#start {
width: 100px;
height: 75px;
left: 50px;
top: 50px;
}
#end {
width: 150px;
height: 110px;
bottom: 100px;
right: 100px;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
pointer-events: none;
}
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
$1 = $('#start'),
$2 = $('#end');
var drawThatShit = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ramp = ctx.createLinearGradient(0, 0, canvas.width / 1.5, 0);
ramp.addColorStop("0", "blue");
ramp.addColorStop("0.8" ,"magenta");
ramp.addColorStop("1", "red");
ctx.setLineDash([20, 10]);
ctx.strokeStyle = ramp;
ctx.lineWidth = 5;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var $1_left = $1.offset().left,
$1_top = $1.offset().top,
$2_left = $2.offset().left,
$2_top = $2.offset().top;
ctx.beginPath();
ctx.moveTo($1_left + $1.width() / 2, $1_top + $1.height() / 2);
ctx.quadraticCurveTo($1.width() * 2, $1.height() * 2, $2_left, $2_top + $2.height() / 2);
ctx.stroke();
}
drawThatShit();
$( window ).resize(function() {
drawThatShit();
});
$(document).ready(function() {
var $dragging = null;
$('body').on("mousedown", "div", function(e) {
$(this).attr('unselectable', 'on').addClass('draggable');
var el_w = $('.draggable').outerWidth(),
el_h = $('.draggable').outerHeight();
$('body').on("mousemove", function(e) {
if ($dragging) {
drawThatShit();
$dragging.offset({
top: e.pageY - el_h / 2,
left: e.pageX - el_w / 2
});
}
});
$dragging = $(e.target);
}).on("mouseup", ".draggable", function(e) {
$dragging = null;
$(this).removeAttr('unselectable').removeClass('draggable');
});
});
This Pen doesn't use any external CSS resources.