Determine Draggable Target?

[nilsWi]

Hey guys,

 

is there a way to determine the target of the drag event?

As you can see in the codepen demo I decalred the "ul li" as the target for the Draggable plugin. However when clicking on the content and dragging the list items the target is either "li", "span" or "div" depending where in the list item I am clicking.

 

Any hints for a solution?

 

Best regards,
Nils

[Jonathan]

Hello nilsWi, and welcome to the GreenSock forum!

 

If you console out event.target or you can access this and use this._eventTarget .. it outputs the LI element when dragging

 

see:

See the Pen aBEsI by jonathan (@jonathan) on CodePen

Draggable.create(
  "ul li",
  {
    onDragStart: function(event){
      console.debug(event);
      console.debug(event.target); // outputs LI element
      console.debug(this._eventTarget); // using 'this' outputs LI element
    }
  }
);

Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc.

 

Reference to Draggable Docs

 

Does that help?

[Rodrigo]

In order to add to Jonathan's advice you can also point to the Draggable instance's target directly, like this:

var element = document.getElementById("myElement");

Draggable.create(element,
{
  type:"x,y",
  onDragStart:function()
  {
    console.log(this.target)//output= element
  }
});

Keep in mind that in any callback managed by a GSAP instance, this refers to the instance itself and this.target to... well the instance's target.

[nilsWi]

Sry for the late response!

 

Thanks to both of you, this is the solution