'How to implement Fluent UI DetailsList Drag & Drop row visual indicator

Referencing the drag & drop example, is there a way to display a visual indicator on the row the dropped row will be moved to, prior to the move occurring? This would be similar to the visual indicator shown when reordering the column headers. There would be a line shown above or below the row that the dropped row would be moved to if completing the move, giving the user an idea of where the row will be positioned.

Posting here because Microsoft doesn't want questions in issues of their GitHub repo.

office-ui-fabricoffice-ui-fabric-react


Solution 1:[1]

Have you tried :

            onDragEnter: (item?: any, event?: DragEvent) => {
            // return string is the css classes that will be added to the entering element.
            return dragEnterClass;
        },

In dragDrop events.

Solution 2:[2]

.is-dropping {
    border-bottom: 3px #0078d4 solid !important;
}

What I have done is override the class "is-dropping" with my styles. You can put this in the index.css file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel Noworyta
Solution 2 Rohit Thakur

Related Questions