Javascript 网格堆栈两个网格

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

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

我的代码有问题：

$（函数（）{
变量选项={
宽度：5，
浮动：假，
删除时间：100，
acceptWidgets:“.grid堆栈项”，
disableResize:true
};
var选项2={
宽度：4，
浮动：假，
删除时间：100，
acceptWidgets:“.grid堆栈项”，
disableResize:true
};
$（'#grid1'）.gridstack（选项）；
$（'#grid2'）.gridstack（选项2）；
可变项目=[
{项目：“A1”，x:0，y:0，宽度：1，高度：1}，
{项目：“A2”，x:1，y:0，宽度：1，高度：1}，
{项目：“A3”，x:2，y:0，宽：1，高：1}，
{项目：“A4”，x:3，y:0，宽：1，高：1}，
{项目：“A5”，x:0，y:1，宽度：1，高度：1}
];
变量项2=[
{项目：“B1”，x:0，y:0，宽度：1，高度：1}，
{项目：“B2”，x:0，y:1，宽度：1，高度：1}，
{项目：“B3”，x:0，y:2，宽度：1，高度：1}，
{项目：“B4”，x:0，y:3，宽：1，高：1}，
{项目：“B5”，x:1，y:0，宽度：1，高度：1}
];
$（'#grid1'）。每个（函数（）{
var grid=$（this.data（'gridstack'）；
_.每个（项目、功能（节点）{
grid.addWidget（$（''+''+节点.item+''），
node.x，node.y，node.width，node.height，未定义，未定义，未定义，未定义，未定义，node.item）；
}，这个）；
});
$（'#grid2'）。每个（函数（）{
log（$（this.data（'gridstack'））；
var grid=$（this.data（'gridstack'）；
_.每个（项目2、功能（节点）{
grid.addWidget（$（''+''+节点.item+''），
node.x，node.y，node.width，node.height，未定义，未定义，未定义，未定义，未定义，node.item）；
}，这个）；
});
$（'.sidebar.grid堆栈项'）。可拖动({
还原：“无效”，
句柄：'.grid堆栈项内容'，
卷轴：错，
附：“身体”
});
$（'.grid stack'）。on（'change'，函数（事件，x）{
控制台日志（x）；
});
});

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


});