拖放网格并在大小大于网格时恢复

Question

这是我的Canvas元素：

<canvas id="canvas" width="280px" height="280px" style="background: #fff;"></canvas>

这是我的元素部分，我想从中将元素拖动到此画布的每个网格单元。

<div id="element1" style="width:55px; height:55px; border: 1px solid; background: lightblue"></div>
<div id="element2" style="width:111px; height:55px; border: 1px solid; background: lightgreen"> 
<div id="element1" style="width:55px; height:55px; border-right: 1px solid"></div>

这是剧本：

<script type="text/javascript" language="javascript">
var bw = 280;
var bh = 280;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";

function drawGrid() {
    for (var x = 0; x <= bw; x += 56) {
        context.moveTo(x, 0);
        context.lineTo(x, 280);
        context.stroke();
    }
    for (var y = 0; y <= bh; y += 56) {
        context.moveTo(0, y);
        context.lineTo(280, y);
        context.stroke();
    }
}
drawGrid();
</script>