gridstack基礎知識，如何使演示工作

Question

真的沒有問題，但我不明白我在這里做錯了什么？

<head>
    <link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>

<body>
    <div class="grid-stack">
        <div class="grid-stack-item" 
            data-gs-x="0" data-gs-y="0" 
            data-gs-width="4" data-gs-height="2">
                <div class="grid-stack-item-content"> azazfaz</div>
        </div>
        <div class="grid-stack-item" 
            data-gs-x="4" data-gs-y="0" 
            data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content"></div>
        </div>
    </div>
</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>

<script type="text/javascript">
    $(function () {
        var options = {
            cell_height: 80,
            vertical_margin: 10
        };
        $('.grid-stack').gridstack(options);
    });
</script>

我收到此錯誤：

gridstack.js:391 Uncaught TypeError: undefined is not a function

在gridstack中指向這一行：

  var is_nested = this.container.closest('.' + opts.item_class).size() > 0;

編輯：如果我替換這行，我發現了問題

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

通過

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

然后它有效，任何想法為什么？

Answer 1

作為一種變通方法，當size()函數不存在時，您可以執行以下操作使gridstack工作：

$.fn.size = function(){
  return this.length;
};

Answer 2

jQuery 3.0刪除了jQuery.fn.size方法。 使用這個庫時，堅持使用1.11.x可能更安全。

https://github.com/jquery/jquery/issues/1749

（順便說一下，我實際上得到了this.container.closest（...）。size不是報告錯誤的函數）。

Answer 3

如果您按照https://api.jquery.com/size/的建議對gridstack.js進行編輯，則可以使用jQuery 3.0及更高版本。

更改gridstack.js（版本0.2.5）中的第511行：

var isNested = this.container.closest('.' + opts.itemClass).size() > 0;

至

var isNested = this.container.closest('.' + opts.itemClass).length > 0;

和gridstack工作正常。

gridstack基礎知識，如何使演示工作

問題描述

3 個解決方案

解決方案1
6 2016-06-17 17:36:29

解決方案2
2 已采納 2015-11-25 17:45:06

解決方案3
1 2016-08-08 08:42:35

gridstack基礎知識，如何使演示工作

問題描述

3 個解決方案

解決方案1 6 2016-06-17 17:36:29

解決方案2 2 已采納 2015-11-25 17:45:06

解決方案3 1 2016-08-08 08:42:35

解決方案1
6 2016-06-17 17:36:29

解決方案2
2 已采納 2015-11-25 17:45:06

解決方案3
1 2016-08-08 08:42:35