Jump to content
GreenSock

Ayaf Noneym

How to use event delegation - [Draggable] plugin

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×