SlickGrid - 将列标题拖到表格外答案

【问题标题】：SlickGrid - Drag column header outside tableSlickGrid - 将列标题拖到表格外
【发布时间】：2014-07-24 15:51:19
【问题描述】：

有没有办法利用 SlickGrid 的 dragstart/end 事件？我正在尝试从 SlickGrid 列标题中获取文本并放在另一个对象上。

【问题讨论】：

【解决方案1】：

它使用 jquery sortable 进行列排序，因此您可以挂钩事件通过修改 slick.grid.js 中的 setupColumnReorder 函数

我添加了自己的事件处理程序： onColumnsReorderStart onBeforeColumnsReordered

function setupColumnReorder() {
  $headers.filter(":ui-sortable").sortable("destroy");
  $headers.sortable({
    containment: "parent",
    distance: 3,
    axis: "x",
    cursor: "default",
    tolerance: "intersection",
    helper: "clone",
    placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
    start: function (e, ui) {
      ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
      $(ui.helper).addClass("slick-header-column-active");
      trigger(self.onColumnsReorderStart, ui);//added HERE
    },
    beforeStop: function (e, ui) {
        $(ui.helper).removeClass("slick-header-column-active");
        trigger(self.onBeforeColumnsReordered, ui);//added HERE
    },
    stop: function (e) {
      if (!getEditorLock().commitCurrentEdit()) {
        $(this).sortable("cancel");
        return;
      }

      var reorderedIds = $headers.sortable("toArray");
      var reorderedColumns = [];
      for (var i = 0; i < reorderedIds.length; i++) {
        reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
      }
      setColumns(reorderedColumns);

      trigger(self.onColumnsReordered, {});
      e.stopPropagation();
      setupColumnResize();
    }
  });
}

您需要在同一个文件中注册事件：

// Public API

$.extend(this, {
  "slickGridVersion": "2.1",

  // Events
  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onHeaderCellRendered": new Slick.Event(),
  "onBeforeHeaderCellDestroy": new Slick.Event(),
  "onHeaderRowCellRendered": new Slick.Event(),
  "onBeforeHeaderRowCellDestroy": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),

  "onViewportChanged": new Slick.Event(),
  "onColumnsReorderStart": new Slick.Event(),//added HERE
  "onColumnsReordered": new Slick.Event(),
  "onBeforeColumnsReordered": new Slick.Event(),//added HERE
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onBeforeEditCell": new Slick.Event(),
  "onBeforeCellEditorDestroy": new Slick.Event(),
  "onBeforeDestroy": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),
  "onCellCssStylesChanged": new Slick.Event(),

...

然后像这样使用它：

    grid.onColumnsReordered.subscribe(function (s, e) {
        console.log('onColumnsReordered');
        var myItem = e.item;
    });
    grid.onColumnsReorderStart.subscribe(function (s, e) {
        console.log('onColumnsReorderStart');
        var myItem2 = e.item;
    });

    grid.onBeforeColumnsReordered.subscribe(function (s, e) {
        console.log('onBeforeColumnsReordered');
    });

【讨论】：

一切正常，有没有办法显示与箭头一起拖动的值？我认为阴影元素或其他东西可以附加到拖动箭头并在拖动结束后将其删除，但不知道该怎么做。
另外，当尝试将列拖动到外部时，它会在表格框架中水平移动（即使我能够访问单击的元素并在表格视图外的拖动停止处检索它。
要删除移动约束，您需要从 slick.grid.js 中的可排序初始化中删除“包含”和“轴”选项。至于第一条评论，我不明白您要显示什么值（标题中的文本？）；
它工作正常，我可以将它移到网格之外，尽管一旦鼠标位于列标题边界之外，拖动值（列标题）不可见。关于第一条评论，我的意思是当您拖动显示的值以及移动光标以显示正在拖动的值时。
听起来您在拖动列标题时遇到了一些 zIndex 问题。检查您的 css 中的相对位置容器元素。也许你可以发布这个标题隐藏问题的例子（比如 jsfiddle），这样我就可以看到活体发生了什么？