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

Question

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

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

我希望能够在网格之间拖放...但是，拖放不会 "add" 到网格，它应该会导致 post 我的服务器显示来自网格 1 掉落到网格 2 上。想象一下，如果您愿意...

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

我想将一个用户放到一个角色上，然后 post 返回服务器，哪个用户被放到哪个角色上。（它也将以另一种方式工作...将角色放到用户身上，为用户赋予角色 - 结果相同，放置不同）

在 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 事件......这是间歇性行为的原因。（我的鼠标指针在我拖动的项目的 top/left 内 10px）。

所以，改变...

      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 之外。

目标网格占位符 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...它们可能只是我用来接近我想要的样本的剩余部分）。

现在，我可以继续存钱了……但与我对下降的沮丧相比，这微不足道。

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

Drag and drop from one slickgrid to another on same page

javascript

jquery

drag-and-drop

slickgrid