This example naively relies on browser drag and drop implementation without much custom logic.
When the box is dragged, we remove its original DOM node by returning
null
from render()
and let browser draw the
drag preview. When the is released, we draw it at the new coordinates.
If you try to drag the box outside the container, the browser will
animate its return.
While this approach works for trivial cases, it flickers on drop. This happens because the browser removes the drag preview before we have a chance to make the dragged item visible. This might not be a problem if you dim the original item instead of hiding it, but it's clearly visible otherwise.
If we want to add custom logic such as snapping to grid or bounds
checking, we can only do this on drop. There is no way for us to
control what happens to dragged preview once the browser has drawn it.
Check out the custom rendering example
if you'd rather trade more control for some more work.