ynamite Posted May 12, 2021 Share Posted May 12, 2021 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 More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 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"); }); 2 Link to comment Share on other sites More sharing options...
ynamite Posted May 12, 2021 Author Share Posted May 12, 2021 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 More sharing options...
Shaun Gorneau Posted May 12, 2021 Share Posted May 12, 2021 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. 3 Link to comment Share on other sites More sharing options...
ynamite Posted May 12, 2021 Author Share Posted May 12, 2021 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 More sharing options...
Shaun Gorneau Posted May 12, 2021 Share Posted May 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
ynamite Posted May 12, 2021 Author Share Posted May 12, 2021 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 More sharing options...
Shaun Gorneau Posted May 12, 2021 Share Posted May 12, 2021 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 More sharing options...
ynamite Posted May 12, 2021 Author Share Posted May 12, 2021 @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 More sharing options...
Solution GreenSock Posted May 12, 2021 Solution Share Posted May 12, 2021 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? 2 Link to comment Share on other sites More sharing options...
ynamite Posted May 12, 2021 Author Share Posted May 12, 2021 16 minutes ago, GreenSock said: Does that help? @GreenSock Excellent, exactly what I was looking for. Thanks a lot! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now