How to use event delegation - [Draggable] plugin

[Ayaf Noneym 0 Likes (Newbie)]

I have an unordered list of items, I am also appending more items in the respective list dynamically. As you can see in the below example that the drag only working on click (because I made it to do so). Is there any way to use event delegation without adding eventListener.

 

Note - I am using event delegation because I am dynamically appending elements in the list. 

See the Pen LYeyYVv by NikalLawde (@NikalLawde) on CodePen

[GreenSock 18,886 Likes (Superhero)]

I see a few problems:

1. You're listening for the wrong event - a "click" event won't fire until you RELEASE the mouse/pointer. It should be pointerdown/mousedown/touchstart
2. In order for Draggable to actually commence the dragging, you need to tell it to do so. You're only creating an instance which starts listening for pointerdown/mousedown/touchstart at that point...but in your scenario, the press has already happened so call .startDrag() and feed in the event. 

Sorta like this: 

See the Pen mdpmPNb?editors=1010 by GreenSock (@GreenSock) on CodePen

 

But you'll probably need to add listeners for touchstart and mousedown to support other browsers/devices. 

 

Have fun!