拖动链接时阻止`click`

Question

我使用gridster创建链接网格。点击它时，链接应该正常工作。问题是它拖动后也会被点击。我怎样才能阻止它被拖动后被点击？

请检查：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'); 

}); 

Answer 1

待办事项不知道是否有内置的东西，因为jQuery可拖动有这个选项，但找不到与gridster类似的东西。

你总是可以自己创建功能：

$(".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

Answer 2

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?

我认为，链接回答同样的问题

Answer 3

$(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'); 

}); 

我已经更新了你的提琴http://jsfiddle.net/tr4cU/6/

Answer 4

我不知道这会帮助，但只是一个想法

代替制作完整的夹具ddle为可点击的，为什么不使用唯一的联系是可点击，我的意思是

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

这样做将满足你所需要的，都尝试这样做，它的工作原理

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