angular-ui-routerjquery-ui-draggableangular-dragdrop

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.

enter image description here

Any advice on how I can correct this?


Solution

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