SlickGrid - 在表格外拖动列标题

Question

有什么方法可以触发SlickGrid的dragstart/end事件？我试图从SlickGrid列标题中取出文本并放在另一个对象上。

Answer 1

它通过修改slick.grid.js的setupColumnReorder功能使用jQuery的排序为列排序，所以你可以挂钩到事件

我已经加入我自己的事件处理程序： 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'); 
    });