Перетаскивание из одного slickgrid в другое на той же странице

Question

Я новичок в SlickGrid, но любя, как он выглядит и чувствует.

У меня есть две SlickGrids на странице, которые оба передаются JSON с контроллера MVC на задней панели. Это работает нормально (хотя у меня небольшая проблема с форматированием, но я уверен, что я это проиграю).

Я хочу, чтобы иметь возможность перетаскивать между сетками ... однако, падение не «добавляет» к сетке, оно должно вызывать сообщение на моем сервере, показывающее, что из сетки 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 также срабатывает, поэтому я не могу положиться на это.

Любые идеи вообще были бы наиболее полезными.

Как вы знаете, это не будет всего две сетки на странице, в конечном счете, может быть много больше, и я хочу, чтобы каждый из них был перетаскиваемым, и каждый из них принимал падение из другой сетки.

Благодарим за помощь.

Следующее сверху ... все еще экспериментирует. Я пробовал использовать форматтер, но это не сработало. Однако я заметил что-то довольно странное, потому что когда элемент, который я перетаскивал, отставал от мыши, он запускал события 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 записывайте детали ячейки в глобальный var, в моем случае я хотел записать имя роли.

В onMouseLeave установите для глобального var значение 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 ... они, вероятно, просто остатки от образца, который я использовал, чтобы приблизиться к тому, что я хочу).

Теперь я могу справиться с экономией ... но это мелководье по сравнению с моим разочарованием с падением.