Gridster.js可拖动div与内容

Question

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

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

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

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

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

Answer 1

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

  handle: 'header, header *'

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

无需ignore_dragging

Answer 2

我添加了＆＃34;处理＆＃34;对你的拖拉机。见下面的代码

$(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中提到的元素。

Answer 3

我也有一个小部件标题包含一些内容（在子级div中分类＆＃34;小部件名称＆＃34;）和一个关闭图标以删除小部件。我只能使用widget-header div中的空白区域进行拖动。

draggable:
  handle: ".widget-header"

所以，我将其更改为如下所述并且有效。

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