Question

使用带有两个网格的gridstack，当我们将项目从一个容器拖到另一个容器时，该项目会消失。有时在第一次拖动时不会发生。

我确实使用了官方示例并进行了一些更改：

http://troolee.github.io/gridstack.js/demo/two.html

我的代码有问题：

$(function () {
   var options = {
        width: 5,
        float: false,
        removeTimeout: 100,
        acceptWidgets: '.grid-stack-item',
        disableResize: true
    };


   var options2 = {
      width: 4,
      float: false,
      removeTimeout: 100,
      acceptWidgets: '.grid-stack-item',
      disableResize: true
  };


  $('#grid1').gridstack(options);


  $('#grid2').gridstack(options2);


  var items = [
      {item: "A1", x: 0, y: 0, width: 1, height: 1},
      {item: "A2", x: 1, y: 0, width: 1, height: 1},
      {item: "A3", x: 2, y: 0, width: 1, height: 1},
      {item: "A4", x: 3, y: 0, width: 1, height: 1},
      {item: "A5", x: 0, y: 1, width: 1, height: 1}
  ];



  var items2 = [
      {item: "B1", x: 0, y: 0, width: 1, height: 1},
      {item: "B2", x: 0, y: 1, width: 1, height: 1},
      {item: "B3", x: 0, y: 2, width: 1, height: 1},
      {item: "B4", x: 0, y: 3, width: 1, height: 1},
      {item: "B5", x: 1, y: 0, width: 1, height: 1}
  ];



  $('#grid1').each(function () {


      var grid = $(this).data('gridstack');


      _.each(items, function (node) {
          grid.addWidget($('<div><div class="grid-stack-item-content" data-gs-item="' + node.item + '" /> '  + '<div class="grid-stack-item-content">' + node.item + '</div>' + '<div/>'),
         node.x, node.y, node.width, node.height, undefined, undefined, undefined,undefined,undefined,node.item);
      }, this);
  });


  $('#grid2').each(function () {

      console.log($(this).data('gridstack'));


      var grid = $(this).data('gridstack');


      _.each(items2, function (node) {
          grid.addWidget($('<div><div class="grid-stack-item-content" data-gs-item="' + node.item + '" /> '  + '<div class="grid-stack-item-content">' + node.item + '</div>' + '<div/>'),
          node.x, node.y, node.width, node.height, undefined, undefined, undefined,undefined,undefined,node.item);
      }, this);
  });







  $('.sidebar .grid-stack-item').draggable({
      revert: 'invalid',
      handle: '.grid-stack-item-content',
      scroll: false,
      appendTo: 'body'
  });



   $('.grid-stack').on('change', function(event, x) {
       console.log(x);
   });


});

Gridstack两个网格

0 个答案: