拖動鏈接時阻止`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>