Search jQuery

jQuery Forum

Can the same element have .draggable() and click event?

in Using jQuery UI • 2 years ago

Hellow,
i m trying to learn jQuery by building a backgammon game.
I have almost made it, with click events.
I would like to add the same movement with drag n drop.
In order to make this happen i must find a way so as the click event wont happen on drag and drop.
I could'n find any answer to that. So i guess it cannot be done?
I m thinking about using the stop event of draggable() but haven't figure out how to do it.

by the way my project is on
http://apogee.biz.nf/BackGamon/blackgamon.html
with just the first movement can be made just to check its working.
every reply is most welcomed :)

Replies(5)

rdworth

Re: Can the same element have .draggable() and click event?

2 years ago

See the following relevant options:

http://docs.jquery.com/UI/Draggable#option-handle

http://docs.jquery.com/UI/Draggable#option-cancel

http://docs.jquery.com/UI/Draggable#option-delay

http://docs.jquery.com/UI/Draggable#option-distance

brianbour..

Re: Can the same element have .draggable() and click event?

1 year ago

dimitris,

I had the same problem and came up with this solution.

// set a var as false as a way to change and flag if something is being dragged
var dragCheck = false;
$('.element').draggable({
revert: true,
drag: function(){
// On drag set that flag to true
dragCheck = true;
},
stop: function(){
// On stop of dragging reset the flag back to false
dragCheck = false;
}
});
// Then instead of using click use mouseup, and on mouseup only fire if the flag is set to false
$('.element').bind('mouseup', function(){
if(dragCheck == false){
// do the click action here...
}
});

Kevin B

Re: Can the same element have .draggable() and click event?

1 year ago

that is not necessary:

$(".element")
.draggable()
.click(function(){
if ( $(this).is('.ui-draggable-dragging') ) {
return;
}
// click action here
});

while in the dragging state, the draggable gets a new class: ui-draggable-dragging

http://docs.jquery.com/UI/Draggable

-- Kevin

brianbour..

Re: Can the same element have .draggable() and click event?

1 year ago

This works well Kevin, thanks!

shaneperc

Re: Can the same element have .draggable() and click event?

2 months ago

I know this is old, but if you want single-click, double-click, and draggable, I modified an existing plugin. It's time-based, but it works (Kevin's advice is more solid, but doesn't work for single/double clicks)

jQuery.fn.singleDoubleClick = function(single_click_callback, double_click_callback, dragTimeout, dblClickTimeout) {
return this.each(function(){
var clicks = 0, self = this, ms = 0, timer;
dragTimeout = dragTimeout || 600;
dblClickTimeout = dblClickTimeout || 300;
jQuery(this).mousedown(function(event){
ms = 0;
timer = setInterval(function(){ms += 50}, 50);
});
jQuery(this).click(function(event){
clicks++;
if (clicks == 1) {
setTimeout(function(){
if(ms > dragTimeout){
return; // or add a drag timeout callback
}else if(clicks == 1){
single_click_callback.call(self, event);
} else {
double_click_callback.call(self, event);
}
clicks = 0;
clearInterval(timer);
}, dblClickTimeout);
}
});
});
}

Top Reply

Response title

Attachments

jQuery Forum

Can the same element have .draggable() and click event?

Replies(5)

Re: Can the same element have .draggable() and click event?

Re: Can the same element have .draggable() and click event?

Re: Can the same element have .draggable() and click event?

Re: Can the same element have .draggable() and click event?

Re: Can the same element have .draggable() and click event?

Statistics

Tags

Actions

Related Posts