Prevent `click` while the link is dragged

Question

I'm using gridster to make a grid of links. The link should work normal when click on it. Problem is it's also get clicked after dragged. How can I stop it from being clicked after dragged?

Please check: http://jsfiddle.net/b_m_h/tr4cU/

<div class="gridster">
    <ul id="reszable">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><a href="http://google.com" target="_blank">LINK</a></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    </ul>
</div>

Js:

$(function(){

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100]
    });

    var gridster = $(".gridster ul").gridster().data('gridster');

});

score 5 · Accepted Answer · answered Aug 19 '13 at 10:49

5

Don't know if there is something built in as jQuery draggable has options for this, but couldn't find anything similar for gridster.

You could always create the functionality yourself:

$(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [100, 100]
}).on({
    mousedown: function(e) {
        $(this).data({top: e.pageX, left: e.pageY});
    },
    mouseup: function(e) {
        var top   = e.pageX,
            left  = e.pageY,
            ptop  = $(this).data('top'),
            pleft = $(this).data('left');

        $(this).data('dragged', Math.abs(top - ptop) > 15 || Math.abs(left - pleft) > 15);
    },
    click: function(e) {
        if ( $(this).data('dragged') ) e.preventDefault();
    }
}, 'a');

FIDDLE

answered Aug 19 '13 at 10:49

adeneo

312,895
29
395
388

Thanks, I like the way you leave margin for small mouse move. – BMH Aug 19 '13 at 11:53
@BMH - thanks, 15 pixels is usually enough to constitute a drag, if not it can always be changed. – adeneo Aug 19 '13 at 12:06
tanks, the version on the website not working. For anybody using fiddle code, dont forget to add "ol,ul { list-style:none;}" on css, its in fiddle normalize, thats why its not in gridster css. – forX Aug 24 '13 at 05:40
somebody create a version working on IE8, http://stackoverflow.com/questions/12541423/alternative-to-gridster. Working on compatibilty mode. – forX Aug 24 '13 at 05:46
thank you @adeneo for great tip. I also had to add e.stopPropagation(); on top of e.preventDefault(); for it to work. – s-t Sep 12 '14 at 03:35

score 1 · Answer 2 · answered Aug 19 '13 at 11:18

I'm not sure this could help, but just for an idea

Instead of making complete griddle as clickable, why not use only Link as clickable, what i mean is

<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
    <p> <a href="http://google.com" target="_blank">LINK</a></p></li>

Doing this will fulfill what you needed, have tried this and it works

    <div class="gridster">
    <ul id="reszable">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
    <p> <a href="http://google.com" target="_blank">LINK</a></p></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>

In my real implementation the link is a big image that fill the whole grid. — BMH, Aug 19 '13 at 11:54

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

draggable: {
        start: function(event, ui) {

            dragged = 1;
            // DO SEOMETHING
        }
    }

...
    if(!dragged){
        // DO SOMETHING
    }
    // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0

How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

I think that link answers the same question

edited May 23 '17 at 11:52

Community

1
1

answered Aug 19 '13 at 10:47

Dave Lawrence

3,843
2
21
35

N8FURY · Answer 4 · 2013-08-19T13:01:19.523

$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100],
        draggable: {
            start:  function(event, ui){ 
              $("a").click(function(event) { event.preventDefault(); }) // prevent the click event when the drag started 

            },
        }

    });

    $("#reszable > li").mouseleave(function(){
        $("a").unbind('click');  // bind the click event again when the drag stopped 
    });

    var gridster = $(".gridster ul").gridster().data('gridster');

});

I have updated your fiddle http://jsfiddle.net/tr4cU/6/

Prevent `click` while the link is dragged

4 Answers4