4

There is a known issue with gridster that if you have content inside your drag handle, you will not be able to drag with it. I got a response from the creator saying use ignore_dragging to handle this, but I have tried it for a few hours now with no luck. This is the example I was provided with

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

I have tried using this in many different ways for a few hours now and cannot seem to get this working. Has anyone successfully gotten this to work?

Just in case - here is the documentation for the ignore_dragging - [ignore_dragging] Object | Function optional Array of node names that should not trigger dragging, by default is ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON']. If a function is used return true to ignore dragging. (http://gridster.net/docs/classes/Draggable.html).

Any help would be much appreciated!!

4

3 回答 3

6

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

  handle: 'header, header *'

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

不需要ignore_dragging

于 2015-07-16T18:53:51.537 回答
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');

});

确保您正在拖动您在可拖动句柄中提到的元素。

于 2014-07-23T06:56:59.667 回答
0

我也有一个带有一些内容的小部件标题蓝色背景的 div 是小部件标题和要拖动的句柄，除了关闭图标（x）（在一个名为“小部件名称”的子 div 内）和一个用于删除小部件的关闭图标。我只能使用小部件标题 div 中的空白空间进行拖动。

draggable:
  handle: ".widget-header"

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

draggable:
  handle: ".widget-header, .widget-header .widget-name"
于 2015-12-03T15:45:16.353 回答