Draggable clickable (same element)

[hugonoro 6 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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.

 

[hugonoro 6 Likes (Newbie)]

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.

[Dipscom 2,815 Likes (Superhero)]

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.

[hugonoro 6 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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

[Dipscom 2,815 Likes (Superhero)]

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?

[hugonoro 6 Likes (Newbie)]

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.

[Dipscom 2,815 Likes (Superhero)]

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. 

[hugonoro 6 Likes (Newbie)]

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.

[Dipscom 2,815 Likes (Superhero)]

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

[OSUblake 9,990 Likes (Superhero)]

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

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

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

[hugonoro 6 Likes (Newbie)]

Hi OSUblake, 

as usual your reply is a life savior . 

 

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