Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ynamite

draggable: children of anchor not draggable with mouse

Go to solution Solved by GreenSock,

Recommended Posts

Hi there

 

draggable is working fine on my touch device, but not on my desktop using a mouse – latest Firefox Mac, haven't tested any other browsers.

Anyone have any ideas as to why?

 

In this specific case the element I'd like to be draggable is placed within an anchor-tag and I suspect that's where the problem lies.

Adding `dragClickables: true` doesn't seem to make a difference.

 

I could change the HTML, but I'd like to avoid that if possible, as this would require some amount of work and testing on project that is live.

 

Thanks for the help!

 

See the Pen JjWGrMY by ynamite (@ynamite) on CodePen

Link to comment
Share on other sites

Not sure. Any ideas, @GreenSock?

 

I know you said you don't want to change the HTML, but you could just manually open the link. Change the <a> to a <div> and then add a listener.

const dragMe = document.querySelector(".drag-me");

dragMe.addEventListener("click", e => {
  window.open("http://www.google.com", "_blank");
});

 

  • Like 2
Link to comment
Share on other sites

Thanks @OSUblake

 

After changing the <a> to a <div> it works fine and was much easier to implement than expected.

The drawback is that the link will only work with JS enabled. Not sure if search engines will be able to pickup on these faux-links.

Link to comment
Share on other sites

3 minutes ago, ynamite said:

Thanks @OSUblake

 

After changing the <a> to a <div> it works fine and was much easier to implement than expected.

The drawback is that the link will only work with JS enabled. Not sure if search engines will be able to pickup on these faux-links.

 

I would mark it up as a link and then use Javascript to change the markup to a <div>. That way if JS is not available, due to error or being disabled, your link is intact.

  • Like 3
Link to comment
Share on other sites

4 minutes ago, Shaun Gorneau said:

 

I would mark it up as a link and then use Javascript to change the markup to a <div>. That way if JS is not available, due to error or being disabled, your link is intact.

Hm, that sounds edgy. Can the tag of an existing element simply be changed? And if so, how?

Edit: the whole element would need to be replaced, I think.

Link to comment
Share on other sites

3 minutes ago, ynamite said:

Hm, that sounds edgy. Can the tag of an existing element simply be changed? And if so, how?

 

Not edgy at all, just progressive enhancement.

  • Like 1
Link to comment
Share on other sites

11 minutes ago, Shaun Gorneau said:

 

Not edgy at all, just progressive enhancement.

 

Alright, easier done than said ;) seems to be working fine.
Still seems a little off to me but oh well, it works. Thanks!

Link to comment
Share on other sites

13 minutes ago, ynamite said:

 

Alright, easier done than said ;) seems to be working fine.
Still seems a little off to me but oh well, it works. Thanks!

 

What about it seems off? Is the interaction not functioning? Or do you think the implementation feels "off"?

Link to comment
Share on other sites

@Shaun Gorneau

 

No real reason, just a gut feeling. Nothing against progressive enhancement, do that all the time, I've just never had to change the actual node type of an existing element before. Probably just me.

 

Thanks for the help!

Link to comment
Share on other sites

  • Solution

Part of the problem is that your <a> is an outer wrapper around the thing that Draggable is controlling, so mouse/pointer/touch events are getting hijacked before they even get to the Draggable. It looks to me like some browsers (like Firefox) interpret a mousedown on a linked image as if you want to drag-n-drop it somewhere (like your desktop).

 

For me, this seemed to resolve it in Firefox: 

document.querySelector(".drag-me").addEventListener("mousedown", e => e.preventDefault())

Does that help? 

  • Like 2
Link to comment
Share on other sites

16 minutes ago, GreenSock said:

Does that help? 

 

@GreenSock

Excellent, exactly what I was looking for.

Thanks a lot!

  • 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.
×