在同一页面上从一个 slickgrid 拖放到另一个

Question

我是 SlickGrid 的新手，但我喜欢它的外观和感觉。

我在一个页面上有两个 SlickGrid，它们都由来自后端 MVC 控制器的 JSON 提供。这工作正常（虽然我有一个轻微的格式问题，但我相信我会弄清楚这一点）。

我希望能够在网格之间拖放...但是，拖放不会“添加”到网格中，它应该会在我的服务器上发布一个帖子，显示网格 1 中的内容被拖放到网格中的内容2. 想象一下，如果你...

第一个网格有一个用户列表 第二个网格有一个角色列表。

我想把一个用户放到一个角色上，然后发回服务器，哪个用户被放到了哪个角色上。 （它也可以以另一种方式工作......将角色放到用户身上，以赋予用户角色 - 相同的结果，不同的丢弃）

在https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html 之后，我已经部分工作了。我花了一段时间才走到这一步。我可以从一个网格中拖动，但对于如何使第二个网格接受放置完全没有想法，更不用说第二个网格如何分辨从第一个网格中删除了什么。

如何让第二个网格接受放置？如何获取丢失内容的详细信息？

在我试图放入的网格的 JS 中，我有...

        rolegrid.onMouseEnter.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            dropRow = roleslickdata[cell.row].RoleName;
            console.log(cell.row + ' : ' + roleslickdata[cell.row].RoleName);
            e.stopPropagation();
        });

        rolegrid.onMouseLeave.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('OUT-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            dropRow = null;
            console.log('Leaving ' + cell.row + ' : ' + roleslickdata[cell.row].RoleName);
            e.stopPropagation();
        });

        rolegrid.onDragEnd.subscribe(function (e) {
            var cell = rolegrid.getCellFromEvent(e);
            console.log('DragEnd-' + cell.row);
            //grid.setSelectedRows([cell.row]);
            e.stopPropagation();
        });

现在... onDragEnd 似乎没有触发，我假设这是因为拖动开始没有从这里开始。

onMouseEnter 和 onMouseLeave 似乎在触发时断断续续......当 onMouseEnter 触发时，onMouseLeave 也会触发，所以我不能依赖这个。

任何想法都是最有帮助的。

正如您所知，页面上不会只有 2 个网格，最终，可能还有更多，我希望每个网格都可以拖动，并且每个网格都可以接受来自另一个网格的拖放。

感谢您的帮助。

从上往下……仍在试验中。我曾尝试使用格式化程序，但没有奏效。但是，我确实注意到一些非常奇怪的事情，因为当我拖动的项目滞后于鼠标时，它会触发 onMouseEnter 和 onMouseLeave 事件......这是间歇性行为的原因。 （我在拖动的项目的顶部/左侧有 10 像素的鼠标指针）。

所以，改变...

      grid.onDrag.subscribe(function (e, dd) {
          dd.helper.css({ top: e.pageY - 5, left: e.pageX - 10 });
      });

拥有 e.pageX + 10，我可以让 onMouseEnter 和 onMouseLeave 几乎每次都触发。但是，我并不认为这真的很理想……因为当您在 Windows 中拖动某些东西时，鼠标指针总是在您拖动的项目内，这感觉有点奇怪。

我将继续这条路线，但如果有人有任何进一步的建议可能会有所帮助，我们将不胜感激。

谢谢。

Answer 1

我知道了……我花了几天时间，在绝望中来到这里，但没有放弃。发布答案以防其他人需要它，但如果有人有更好的方法，将不胜感激。

在目标网格中... 基本上，在 onMouseEnter 中，将单元格的详细信息记录到全局变量中，就我而言，我想记录 RoleName。

在 onMouseLeave 中，将全局变量设置为 null。

这样，当鼠标悬停在单元格上时，我知道我要放下的位置。但是，请记住，如果我有一个要拖动的 div，鼠标实际上不能在 div 上，它必须在它之外。

目标网格占位符 div 已绑定...

  $("#RoleTable-")
  .bind("drop", function (e, dd) {
      if (dd.mode != "DragUser") {
          return;
      }
      console.log("Drop in " + dropRow);

      console.log('Working with ' + dd.grid.getDataItem(dd.row).Username);

      grid.invalidate();
      grid.setSelectedRows([]);
  });

通过

  dd.grid.getDataItem(dd.row).Username 

我从源网格中获取用户名。 （我不确定是否需要 grid.invalidate 和 grid.setSelectedRows ......它们可能只是我用来接近我想要的样本的剩余部分）。

现在，我可以继续存钱了……但与我对下降的挫败感相比，这简直是小菜一碟。