2014-07-23 88 views
4

Gridster有一個已知問題,如果您的拖動控制柄內有內容,將無法拖動它。我得到了創作者的回覆,說使用ignore_dragging來處理這個問題,但是現在我已經嘗試了幾個小時,但沒有運氣。這是我得到了Gridster.js可拖動div與內容

http://jsbin.com/fuwunuyi/6/edit

我現在已經在許多不同的方式使用該幾個小時嘗試似乎並不能得到這個工作的例子。有沒有人成功地得到這個工作?

爲了以防萬一 - 這裏是ignore_dragging的文檔 - [ignore_dragging] Object |功能可選 不應觸發拖動的節點名稱數組,默認爲['INPUT','TEXTAREA','SELECT','BUTTON']。如果使用了函數,則返回true以忽略拖動。 (http://gridster.net/docs/classes/Draggable.html)。

任何幫助將不勝感激!

回答

0

我在可拖動的代碼中添加了「句柄」。看下面的代碼

$(function(){ 

    gridster = $(".gridster ul").gridster({ 
    widget_base_dimensions: [100, 120], 
    widget_margins: [5, 5], 
    draggable: { 
     handle: 'header span', 
     ignore_dragging: function (event) { 

     return true; 
     } 
    } }).data('gridster'); 

}); 

確保你拖動你在可拖動句柄中提到的元素。

+0

拖動手柄不是問題,如果你有拖動手柄內的孩子,就不再拖累,忽略拖動想解決這個 - 我只是不知道如何。 – ajmajmajma

+0

@ user3201696請參閱 句柄:'標題範圍' span是子元素。插入子元素後,要拖動你必須將這個子元素作爲你的句柄。 或者另一種解決方案是檢查您的跨度寬度是100%;每次拖動其跨度時,不是標題。如果您將跨度寬度更改爲100px,並在其他區域(即標題)中拖動,則也會進行拖動。 在你的代碼中沒有句柄。添加可拖動的句柄並正確地分配它的值,你將能夠進行拖動。 –

+0

感謝您花時間回覆這些細節。這個問題並不完全在可拖動的div內部有一些不可拖動的東西。問題就像這樣 - 我有一個頭部元素,裏面有很多子div,不僅僅是每次從服務器上取下時,這些div的內容都是唯一的。所以在這種情況下 - 如果我將拖動手柄作爲整個標頭,這將是最方便的,因此它也意味着拖動手柄也是一樣。其中一位開發人員迴應說,我可以使用ignore_dragging,但我不明白。 – ajmajmajma

6

我有同樣的問題。這工作對我來說:

handle: 'header, header *' 

看來,你可以指定多個句柄選擇器用逗號分隔。我嘗試了'header,span',然後用'header *'替換了span。這基本上意味着標題中的所有內容。

無需ignore_dragging

+0

這很好,謝謝! – emackey

+0

我被困在這個問題上。完美的答案。謝謝 :) –

0

我也曾經有過一個widget頭Div with blue background is widget-header and handle to drag except the close icon(x)一些內容(一個孩子DIV中歸入「小部件名稱」),並關閉圖標刪除小部件。我只能使用widget-header div中的空白空間進行拖動。

draggable: 
    handle: ".widget-header" 

所以,我改變它,如下所述,它的工作。

draggable: 
    handle: ".widget-header, .widget-header .widget-name"