Dragging and dropping an HTML5 canvas to the grid

Question

I have an html5 canvas with a 10x10 grid. The user can drag a tetrix-like object inside this grid. Objects must be attached to the grid (when dragging and dropping), and if it is deleted on other objects, it should return to its original position. (e.g. JqueryUI draggable)

I know that EaselJS, KineticJS supports drag & drop. But I can not find any documentation or tutorial to implement the binding and return the support. Is there any existing solution or do I need to roll on my own?