jQuery clickable element nested in draggable one

Question

Let's say I have got HTML code that looks as follows:

<script>
  $("#draggable").draggable();

  $("#clickable").click(function() {
    alert('CLICK!');
  });
</script>

<div id="draggable">
    <div id="clickable">        
    </div>
</div>

As you can see: clickable div is nested in draggable div. When I drag & drop draggable div using clickable div as handle click event bound to it is fired. That is not desired behaviour. I want the click event to be fired only when you click on clickable but without dragging it anywhere. Is it even possible? I want to add I'm not interested in solutions where setTimeout (or similar) is used. Here you have got jsfiddle link (note: css is added for better visibility).

Thanks for any clues!

SeanCannon · Accepted Answer · 2013-01-23 18:29:31Z

3

Here you go:

function handleClick() {
    alert('click!');
};

$("#draggable").draggable({
    start: function () {
        $('#clickable').off('click');
    },
    stop: function () {
        setTimeout(function(){
            $('#clickable').on('click', handleClick);
        },1);
    }
});

$("#clickable").on('click', handleClick);

Demo : http://jsfiddle.net/HmK9z/

answered Jan 23, 2013 at 18:29

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

biera Over a year ago

well, I said that setTimeout is not good solution for me ;) but thank you nevertheless

SeanCannon Over a year ago

It's required. You can always ask the UI team to implement a native workaround if you don't want to use it. github.com/jquery/jquery-ui

biera Over a year ago

Probably I will need to use it. I thought there is better workaround to do this.Thanks again

Hanlet Escaño · Accepted Answer · 2013-01-23 18:24:21Z

2

Use the callback of the draggable method like this:

HTML:

<div id="draggable">
    <div id="clickable">        
    </div>
</div>

JQuery:

var dragged = false;
$("#draggable").draggable({stop:function(ev,ui) { dragged = true;}});

$("#clickable").click(function() {
    if(!dragged)
        alert('CLICK!');
    dragged = false;
});

JSFiddle: http://jsfiddle.net/AJmTg/9/

Good luck!

answered Jan 23, 2013 at 18:24

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

3 Comments

biera Over a year ago

it's not exactly what I want. I don't want click event to be fired at all (of course when clickable is dragged). Nevertheless, thanks :)

Hanlet Escaño Over a year ago

If you don't want the click event to be fired, then why do you bind it to the clickable div?

biera Over a year ago

to be fired when clicked but not dragged ;)

Collectives™ on Stack Overflow

jQuery clickable element nested in draggable one

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related