带有内容的 Gridster.js 可拖动 div答案

【问题标题】：Gridster.js draggable div with content带有内容的 Gridster.js 可拖动 div
【发布时间】：2014-07-23 02:38:06
【问题描述】：

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

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： jquery gridster

【解决方案1】：

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

  handle: 'header, header *'

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

不需要ignore_dragging

【讨论】：

我被这个问题困住了。完美的答案。谢谢:)

【解决方案2】：

我在您的可拖动对象中添加了“句柄”。见下面代码

$(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');

});

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

【讨论】：

拖动手柄不是问题，如果您在拖动手柄中有孩子，它将不再拖动，忽略拖动应该可以解决这个问题 - 我只是不知道如何。
@user3201696 请参见句柄：'header span' span 是子元素。插入子元素后，要拖动您必须将此子元素作为您的句柄。或者另一种解决方案是检查您的跨度宽度是否为 100%；每次你拖动它的跨度，而不是标题。如果您将跨度宽度更改为 100px，并在其他区域（即标题）拖动，那么拖动也将起作用。跨度 { 宽度：100px;显示：块； } 在您的代码中没有句柄。在 draggable 中添加句柄并正确分配其值，您将能够进行拖动。
感谢您抽出宝贵时间做出如此详细的回复。问题不完全在于在可拖动的 div 中有不可拖动的东西。问题是这样的——我有一个标题元素，里面有很多子 div，不仅因为这些 div 的内容每次从服务器拉出时都是唯一的。所以在这种情况下 - 如果我将拖动手柄作为整个标题，那将是最方便的，所以这意味着任何东西都是拖动手柄。一位开发者回应说我可以使用ignore_dragging，我就是不明白怎么做。

【解决方案3】：

我也有一个小部件标题，其中包含一些内容（在一个名为“小部件名称”的子 div 内）和一个用于删除小部件的关闭图标。我只能使用小部件标题 div 中的空白空间进行拖动。

draggable:
  handle: ".widget-header"

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

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

【讨论】：