Issue with Simple Use Case of Draggable Plugin

[hackfin]

The linked pen is a simple use case of draggable that appears to work in all aspects except one.  The svg elements that are dragged will not display above any of the other elements making it impossible to determine where the cursor/drag is on the screen.  The drop logic appears to work fine and there are no errors reported.  Even though it is built into gsap, I tried messing with the z-index of the svg elements to no avail.  I have a feeling the answer to this is simple.  I just cannot figure it out.

See the Pen jOQGzOg by jhackney (@jhackney) on CodePen

[akapowl]

 

Hello there.

 

This will be neccessery in the first place, to fix your issue, as right now, the overflow of the SVG element will get cut off on its borders:
 

// CSS

svg {
  overflow: visible;
}

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow

 

4 hours ago, hackfin said:

I tried messing with the z-index of the svg elements to no avail. 

 

If you want to make absolutely sure, that your SVG sits on top of any other element z-index wise; also add a position and z-index to the SVG element itself - shapes/paths within an SVG don't respond to z-index; the only thing that determines their stacking order is the order of appearance within the SVG element itself.

 

https://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements

 

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

 

I hope this will help. Cheers.

See the Pen NWEaeyp by akapowl (@akapowl) on CodePen

 

 

 

Edit:

BTW, I don't think your logic for determining whether or not to drop an element will work, as e.target.id will always return empty in your pen; thus your canDrop() function will always return false.

 

You might want to have a look at Draggable's .hitTest() for what you're aiming for.

 

https://greensock.com/docs/v3/Plugins/Draggable/static.hitTest()

 

See the Pen PoxJXdG by akapowl (@akapowl) on CodePen

 

[hackfin]

Thanks, I knew it was something simple.  I ended up going with a more complex "update" type solution so that I could incorporate the draggable hit test on a dynamic list of acceptable drop sites that changes on each circle selected.  It is working great now but I may have one last question on another issue I am trying to overcome.