Gridster.js可拖动div与内容

时间:2014-07-23 02:38:06

标签: jquery gridster

gridster存在一个已知问题,如果您的拖动句柄中有内容,则无法使用它进行拖动。我收到了创建者的回复,说使用ignore_dragging来处理这个问题,但我已经尝试了几个小时而没有运气。这是我提供的示例

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

我已尝试以多种方式使用它几个小时了,似乎无法使其正常工作。有没有人成功地让这个工作?

以防万一 - 这里是ignore_dragging - [ignore_dragging] Object |的文档功能可选 默认情况下,不应触发拖动的节点名称数组是[' INPUT',' TEXTAREA',' SELECT',' BUTTON'] 。如果使用函数,则返回true以忽略拖动。 (http://gridster.net/docs/classes/Draggable.html)。

任何帮助都将非常感谢!!

3 个答案:

答案 0 :(得分:6)

我遇到了同样的问题。这对我有用:

  handle: 'header, header *'

似乎您可以指定用逗号分隔的多个句柄选择器。我试过'header,span'然后用'header *'替换了span。这基本上意味着标题内的所有内容。

无需ignore_dragging

答案 1 :(得分: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');

});

确保拖动你在draggable handle中提到的元素。

答案 2 :(得分:0)

我也有一个小部件标题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"