如何在使用可點擊內容拖動gridster.js小部件後避免點擊事件觸發？

Question

我使用的Gridster（http://gridster.net/）能夠拖動li內的內容。在我的li有一個可點擊的div。

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"> 
    <a href=' '> 
    <div> 
     content 
    </div> 
    </a> 
</li> 

所以這裏是我所面臨的問題，當我停止並釋放拖動，它會調用在div點擊，我如何才能拖動DIV，但拖停止後不調用點擊&發佈。我不希望它拖動後重定向到另一個頁面（用戶拖動和釋放..因爲拖動時，它需要點擊div，同時，div可以被點擊，所以當停止&釋放拖動時，它將調用點擊）

$(function(){ //DOM Ready 

    var gridster = $(".gridster ul").gridster(
    { 
      widget_margins: [5, 5], 
     widget_base_dimensions: [128, 130], 
     max_size_y: 2, 
     max_size_x: 2, 
     extra_cols: 6 
    } 
    ).data('gridster'); 
    //which i tried but failed 
    gridster.draggable.stop(){ 
     onclick = "false"; 
    } 


// gridster.resize_widget($('.gridster li').eq(0), 1,1); 

}); 

或任何人都可以提供有關如何調用或使用通過gridster提供

draggable.stop功能提示：函數（事件，UI）{}回調拖動停止時。

我猜這裏會有一些實現。

初步解決但仍未

var gridster ,draggable ; 
    $(function() { 
     gridster = $(".gridster > ul").find("> li ").click(function(e){ 
      !draggable && alert(1) //ipad2 ，not show alert 
      draggable=0; 
      alert(draggable); 
      }).end() 
      .gridster({widget_margins: [5, 5], 
      widget_base_dimensions: [128, 130],min_cols: 10,min_rows: 20 
      ,serialize_params: function($w, wgd) { 
       return { 
        id: wgd.el[0].id 
        //,col: wgd.col 
        //,row: wgd.row 
       }; 
      } 
      ,draggable: { 
       start:function(event, ui){ 
       // alert("hekio);"); 
        draggable=1; } 
      } 
     }).data('gridster'); 
    //gridster.disable(); 
// gridster.resize_widget($('.gridster li').eq(0), 1,1); 
     if(!dragged){ 
      $("a#blue.grid").click(function(){ 
      window.location = '../yokotachi/category_list.php?category=yokosmart'; 
     }); 
      } 
    // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop 
      dragged = 0 
    }); 

Answer 1

我有一個觸發變量固定它的：var拖= 0 將以下內容添加到您在啓動時將變量設置爲1的gridster初始化：

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

Answer 2

工作沒有挖掘到的JS，加入onclick = "return false;"您<a>標籤應該從觸發停止點擊。

對於停止只是拖累，嘗試：

gridster.draggable.stop(){ 
    return false; 
} 

或

gridster.draggable.stop(e){ 
    e.preventDefault(); 
} 

Answer 3

你應該嘗試：

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

Answer 4

現在有禁用拖動和Gridster拖放操作的原生支持。

$(".gridster ul").gridster().data('gridster').disable();

Answer 5

的問題是，click事件解僱後傳遞給draggable.stop的mouseup事件。

因此，您需要簡單地捕獲該點擊事件並停止它的傳播，然後在完成後取消它，以便人們隨後可以點擊該項目。

你可以做到這一點，像這樣（click for working JSFiddle）：

$(document).ready(function() { 
    // Basic event handler to prevent event propagation and clicks 
    var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); }; 
    $(element).gridster({ 
    draggable: { 
     start: function (event, ui) { 
     // Stop event from propagating down the tree on the capture phase 
     ui.$player[0].addEventListener('click', preventClick, true); 
     }, 
     stop: function (event, ui) { 
     var player = ui.$player; 
     setTimeout(function() { 
      player[0].removeEventListener('click', preventClick, true); 
     }); 
     } 
    } 
    }); 
}) 

這比目前公認的答案一個更好的解決方案，因爲它避免了與狀態設置/跨多個組件檢查變量/處理程序。