Drag and drop from one slickgrid to another on same page

Question

I am new to SlickGrid, but loving how it looks and feels.

I have two SlickGrids on a page, both are being fed by JSON from a back end MVC controller. This is working fine (though I have a slight formatting issue, but I'm sure I will figure that bit out).

I want to be able to drag and drop between grids... however, the drop doesn't "add" to the grid, it should cause a post to my server showing what from grid 1 was dropped onto what from grid 2. Imagine if you will...

First grid has a list of users Second grid has a list of roles.

I would like to drop a user onto a role, then post back to the server, which user was dropped onto which role. (It will also work the other way... drop a role onto a user, to give the user the role - same result, different drop)

Following https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html, I have it partly working. Took me a while to even get this far. I can drag from one grid, but have absolutely NO IDEA on how to make the second grid accept the drop, never mind how the second grid could even tell what has been dropped from the first.

How do I make the second grid accept a drop? How do I get the details of what was dropped?

In the JS for the grid that I am trying to drop into, I have...

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

Now... the onDragEnd doesn't appear to be firing, I am assuming this is because the drag start doesn't start here.

The onMouseEnter and onMouseLeave appear to be intermittent at firing... and the very moment that when onMouseEnter does fire, onMouseLeave also fires, so I can't rely on this.

Any ideas at all would be most helpful.

Just so as you know, it won't be just 2 grids on the page, ultimately, there could be many more, and I will want each one to be draggable and each one to accept a drop from another grid.

Thank you for your help.

Following on from above... still experimenting. I have tried using a formatter but that didn't work. However, I did notice something quite odd, in that when the item I was dragging lagged the mouse, it would fire the onMouseEnter and onMouseLeave events... this was the cause of the intermittent behaviour. (I had the mouse pointer 10px inside the top/left of the item I was dragging).

So, changing...

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

to have e.pageX + 10, I could get the onMouseEnter and onMouseLeave to fire pretty much every time. However, I don't think this is ideal really... as it just feels a little strange as when you drag something in Windows, the mouse pointer is always inside the item you are dragging.

I will continue on this route, but if anyone has any further suggestions that might help, it would be appreciated.

Thank you.

score 2 · Accepted Answer · answered Feb 08 '15 at 12:45

I have got it... it has taken me a few days and in desperation, came here, but didn't give up. Posting the answer in case anyone else needs it, though if anyone has a better way, it would be appreciated.

In the destination grid... Basically, in the onMouseEnter, record the details of the cell into a global var, in my case, I wanted to record the RoleName.

In the onMouseLeave, set the global var to null.

This way, while the mouse is over the cell, I know where I am dropping. However, bear in mind, that if I have a div that I am dragging, the mouse cannot actually be over the div, it has to be outside of it.

The destination grid placeholder div is bound...

  $("#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([]);
  });

and through

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

I get the username from the source grid. (I'm not sure if I need grid.invalidate and grid.setSelectedRows... they are probably just leftovers from the sample I used to get close to what I want).

Now, I can get on with the saving... but that is smallfry compared to my frustration with the drop.

A jsfiddle example of your solution for dragging/dropping between grids would be very handy :) — CatBusStop, Jan 11 '16 at 13:54
Unfortunately, I had this problem a while ago and have drastically altered things since then, plus there is a lot of background JS that I would have to tear out in order to put something reasonable on JSFiddle (apart from the fact, I have never created a JSFiddle page). There is enough info here though to get you through. It is a case of using the example in the link in my opening post, then interpreting what I have written. I don't know if SO has private messaging (as I am not always here), but if so, message me with what you have and you could then potentially create jsfiddle with my help. — David, Jan 11 '16 at 18:02

Drag and drop from one slickgrid to another on same page

1 Answers1