how do I drag an object between angular ui-router views

Hello I'm trying to drag an object between two ui-router ui-view elements

one ui-view element is the main 'canvas' and the other element is a right hand pane that had some or tags.

I got the objects draggable using angular-drag drop. However, when I try to drag things to the left onto the canvas? It ends up going behind the main canvas instead of on top of them.

I tried adjusting the z-index even trying it with !important but it di did not help to show the dragged object when I drag it into the canvas.

The following image shows what I mean when I drag the image halfway into the canvas. It gets hidden behind the canvas div.

Any advice on how I can correct this?

I discovered that my bug could be solved as follows.

I added the jquery ui options:

{
  helper: 'clone', // creates a new object.
  appendTo: 'body' // assigns new object to be a child of a selector
}

You can't just use appendTo as the JQ UI docs will tell you. You need the helper.