在同一页面上从一个滑动网格拖放到另一个滑动网格

Question

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

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

我希望能够在网格之间拖放...但是，拖放不会“添加”到网格中，它应该会向我的服务器发送一条帖子，显示从网格1丢弃了什么grid 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事件......这是间歇性行为的原因。 （我在拖动项目的顶部/左侧有鼠标指针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上，它必须在它之外。

目的地电网占位符格势必...

$("#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 ...他们可能只是我用来接近我想要的样本的剩余物）。

现在，我可以继续保存...但是这是小事，相比之下我的挫败感。