Jump to content
Search Community

Draggable clickable (same element)

hugonoro test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

I'm trying to achieve something but I'm a bit stuck.


So I'm trying to integrate the Jquery UI selectable with the Draggable. Basically I want to be able to tell an element is clickable (I know I can set the draggable=true attribute) and draggable at the same time. Is this possible?


 Do I need to create additional layers on the element? The goal is to visually only appear to be 1 element (for instance an image, a thumbnail, etc.)


I hope it wasn't too confusing :)



Hugo Noro

Link to comment
Share on other sites

Hi Dipscom,

thank you for the reply.


Yes I am aware of the events and I've done a few advanced options already. But the problem seems to be with the click event itself. 


So basically with Jquery UI Selectable, when an element is mouse clicked, it's state changes to "ui-selected". Meaning, the element needs to be listening to the click event.


I was trying to allow the draggable to be clickable (triggering actions on click) by setting the draggable=true attribute. But this kills the ability for it to be draggable.


Apparently the regular OnClick event is hooked up when the mouse clicks but it seems that is not bubbling up, so it's not being captured by the Jquery UI selectable.

Link to comment
Share on other sites

I'm shooting in the dark here without an example, I am afraid. Just guesswork.


The onClick I was referring to in my previous reply is Draggable's onClick, I don't know if it bubbles or not, I would expect it to. 


Give us a tiny example of your setup and I'm sure we can work it out together.

Link to comment
Share on other sites

Hi Dipscom,
so I've setup a very simple example that tries to reflect the issue I'm facing.
So when the line 6 is not commented

 $('.box').attr('data-clickable', true);

if you click the element you see it becoming selected and if you ctrl + click you see it becoming unselected.


But you can no longer drag the element. 


If you comment the same line you can drag the element but the expected functionality of selection is no longer working.


I'm assuming somewhere down the line the click event is being swallowed. As you can see in my example I'm not manipulating any events. Hence my conclusion :) .


Let me know what you think.


See the Pen WRVXYd by hugonoro (@hugonoro) on CodePen

Link to comment
Share on other sites

Will the following do?


See the Pen NdQXJJ?editors=1111 by dipscom (@dipscom) on CodePen


By setting data-clickable:"true" you're effectively telling Draggable to ignore that particular element. Which, in this case is exactly the same element you have defined to be the draggable element. So, it kind of kills itself.


As I said, I know nothing of jQuery but did a quick search into .selectable() and saw it is mainly used to "lasso" select elements. So, if your containing element isn't big enough, you can't drag and "lasso" select. I've made the container much larger just to show the dragging and "lasso" selecting working.


I have added a bunch of methods to the Draggable in case you want to see them in action and when they fire.


Does this help?

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.
  • Create New...