1

这是我的脚本序列：

src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"
src="../dist/gridstack.js"
src="gridstack.js"
src="../dist/gridstack.min.js"
href="../dist/gridstack.css"
href="../dist/gridstack.min.css"

这是我使用 gridstack 函数的 JavaScript 代码，但它显示错误。请检查脚本和 JavaScript 文件的顺序。

    $(function () {
 alert("1");
    $('.grid-stack').gridstack({
        animate: true,
        auto: true,
        width: 12,
        float: true,
        vertical_margin: 0,
        always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: {
            handles: 'e, se, s, sw, w'
        }   
    });

    $('.grid-stack-placeholder').remove();

    this.grid = $('.grid-stack').data('gridstack');

    this.add_widget = function(){
     alert("OK");

        var id = getRandomInt(1111,9999);

        var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
        this.grid.add_widget(el, 0, 0, 6, 5, true);

        $('.grid-stack-item-content[data-id="'+id+'"]').append('<span class="fa fa-times remove-widget"> </span><span class="fa fa-pencil select-use"></span>  </span><span class="fa fa-plus add-nested-widget-box"></span> ');

    }.bind(this);

    this.clear_grid = function () {
        this.grid.remove_all();
    }.bind(this);

    $('.clear-customization, .customize-pages-list li').click(this.clear_grid); 
    $('.add-widget-box').click(this.add_widget);

});

$('body').on('click', '.remove-widget', function(){

    var grid = $('.grid-stack').data('gridstack');

    grid.remove_widget($(this).parents().eq(1));

});


function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
4

1 回答 1

1

将css放在顶部而不是js文件

 href="../dist/gridstack.css"

最后

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"
src="../dist/gridstack.js"

从您的 js 中删除那些 gridstack.min.js，因为您使用的是它的开发版本

即使那不起作用，也试试这个

<script>
$.noConflict();


  $('.grid-stack').gridstack({
        animate: true,
        auto: true,
        width: 12,
        float: true,
        vertical_margin: 0,
        always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: {
            handles: 'e, se, s, sw, w'
        }   
    });
于 2017-07-10T07:47:45.130 回答