keep a div outside of a canvas?

Question

I want to be able to keep a draggable div from moving into a canvas. I don't want the div to be dragged in the canvas at all. I have tried a div as the deflecting element, but it is really complicated and it glitches. How do I achieve this?

Code:

HTML:

<div id="drag"></div>
<canvas></canvas>

CSS:

#drag {
    height: 50px;
    width: 50px;
    background: khaki;
}
canvas {
    height: 200px;
    width: 200px;
    background: aqua;
}

jQuery:

$("#drag").draggable();