javascript - グリッド上にドラッグ アンド ドロップし、サイズがグリッドより大きい場合は元に戻します

Question

これは私のキャンバス要素です:

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