Jump to content
GreenSock

hugonoro

Draggable clickable (same element)

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 :)

 

Thanks,

Hugo Noro

Link to comment
Share on other sites

Hi Hugo,

 

I know nothing of jQuery. 

 

But I think there are a few options on how to approach this. Have you had a look at the Draggable documentation? The sections about onRelease and onClick

 

If you whip up a reduced-case demo showcasing what it is that you want to achieve we might have a better idea what to suggest.

 

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

That will help a ton. Let me have a butcher's for a bit and report back asap.

  • Like 1
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

Well the lasso bit always works fine. But you are also able to click to select one element. You don't necessarily need to lasso all the time. You can click or ctrl + click to select multiple for instance.

Link to comment
Share on other sites

I can get a click event fired from the .box element. You could try and hook that one up into the jQuery plugin you are trying to use.

 

On how the jQuery side of this is going to work is beyond me, I am afraid. 

Link to comment
Share on other sites

Yes, exactly   :) . That was / is my initial problem. Thanks a lot for your help anyway. There are couple of possible workarounds but I was trying to figure out if it was possible to do it with the draggable itself.

Link to comment
Share on other sites

There are others that are more accomplished with jQuery than myself. Maybe there is an answer somewhere and someone will tell us.

Link to comment
Share on other sites

To allow events to go through, do like this...

Draggable.create(draggables, {
  allowEventDefault: true
});

See the Pen KaOjaq by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

Hi OSUblake, 

as usual your reply is a life savior :)

 

Thank you for your (once again) simple and clean solution, You're the man :)

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