Don't reliably get Draggable target?

[Jabberwock]

I'm just getting started with GreenSock, so sorry if this is all pretty basic, but I have a few related questions:

 

Question 1.  I can't figure out how to reliably find which element is being dragged. 

 

In the Codepen above, I have a simple DOM:

<svg id="svg-elem">
  <g id="group">
    <rect id="rect"/>
    <text id="text"/>
  </g>
</svg>

I set the group element to Draggable, bounded by the svg element and have onDragStart and onDragEnd handlers.

 

If you use the above Codepen and gently move your mouse cursor to the right edge of the square and start to drag as soon as the cursor changes to the Move cursor and start dragging right, the draggable.target is for the underlying svg element, not the rect element (at least in Chrome and Firefox on Windows 10).  The issue appears to be that the section of the border that is stroked beyond the boundary of the rect will trigger the drag, but the code looks at the element under the cursor to determine the draggable, and the rect isn't there.

 

Also: if you drag past the boundary of the svg, the draggable.target given is that of the element under the cursor (in the Codepen, try dragging down to the message about where the drag start was--the draggable.target of the onDragEnd will be the message).  Is there any way to reliably get the item that was dragged?  It seems to me that there has to be, but it sure seems like draggable.target ought to be it.

 

 

Question 2: Why is the draggable.target always the rect or the text when I set the group to draggable?  Is there any way I can just get the group as the target?

 

Question 3: Is there any way to force the draggable to treat the portion of the stroked border beyond the boundary of the element as part of the element not to be dragged past the boundary?  Clumsy wording, I know, but right now when you drag past an edge, half the element's boarder is moved past the visible boundary.  I want the library to stop the element as soon as the first pixel of the border encounters the boundary.  Is that doable?

 

Thanks

See the Pen PapYJp?editors=1111 by Jabberwock (@Jabberwock) on CodePen

[OSUblake]

1 hour ago, Jabberwock said:

Question 1.  I can't figure out how to reliably find which element is being dragged. 

 

Check the draggable instance.

 

function onDragStart() {
  
  // This is your group
  console.log(this.target.id);
}

 

1 hour ago, Jabberwock said:

Question 2: Why is the draggable.target always the rect or the text when I set the group to draggable?  Is there any way I can just get the group as the target?

 

 

That's how events work, they bubble up. Again, check the instance.

 

function onDragStart(event) {
  
  // Could go text > group > svg > body > html > document > window
  console.log(event.path);
}

 

 

1 hour ago, Jabberwock said:

Question 3: Is there any way to force the draggable to treat the portion of the stroked border beyond the boundary of the element as part of the element not to be dragged past the boundary?  Clumsy wording, I know, but right now when you drag past an edge, half the element's boarder is moved past the visible boundary.  I want the library to stop the element as soon as the first pixel of the border encounters the boundary.  Is that doable?

 

Browsers don't include stroke when you ask for an element's size. You can put a transparent rect in your group to pad it.