私たちは、ドラッグ操作の体験を容易にするために、目に見えない スタイルを数多く適用しています。これは、スタイリングターゲットとテクニックの組み合わせで行います。このライブラリの目標は、主観的でないスタイリングを提供することです。しかし、デフォルトでは、ドラッグハンドルにいくつかの合理的な カーソル スタイルを適用しています。これは、ライブラリが箱から出してもできるだけシンプルに動作するようにするためのものです。もし、あなたが独自のカーソルを使いたいのであれば、大歓迎です。必要なのは、高い特異性を持つルールを使って、カーソルスタイルのルールをオーバーライドすることだけです。
以下は、ドラッグのライフサイクルの様々な場面で適用されるスタイルです:
Styles applied to: drag handle element using the data-rbd-drag-handle-context-id attribute.
A long press on anchors usually pops a content menu that has options for the link such as 'Open in new tab'. Because long press is used to start a drag we need to opt out of this behavior
-webkit-touch-callout: none;Webkit based browsers add a grey overlay to anchors when they are active. We remove this tap overlay as it is confusing for users. more information.
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);Avoid the pull to refresh action and delayed anchor focus on Android Chrome
touch-action: manipulation;Styles applied to: droppable element using the data-rbd-droppable-context-id attribute.
Opting out of the browser feature which tries to maintain the scroll position when the DOM changes above the fold. We already correctly maintain the scroll position. The automatic overflow-anchor behavior leads to incorrect scroll positioning post drop.
overflow-anchor: none;Styles applied to: drag handle element using the data-rbd-drag-handle-context-id attribute.
Adding a cursor style to let the user know this element is draggable. You are welcome to override this.
cursor: grab;Styles applied using the data-rbd-drag-handle-context-id attribute
An optimisation to avoid processing pointer-events while dragging. Also used to allow scrolling through a drag handle with a track pad or mouse wheel.
pointer-events: none;Styles applied using the data-rbd-draggable-context-id attribute
This is what we use to control <Draggable />s that need to move out of the way of a dragging <Draggable />.
transition: ${string};Styles applied using the data-rbd-droppable-context-id attribute
We apply pointer-events: none to a <Droppable /> during a drag. This is technically not required as an optimisation. However, it gets around a common issue where hover styles are triggered during a drag. You are welcome to opt out of this one as it is it not required for functinality.
pointer-events: none;You are also welcome to extend this to every element under the body to ensure no hover styles for the entire application fire during a drag.
/* You can add this yourself during onDragStart if you like */
body > * {
pointer-events: none;
}Styles applied using inline styles
This is described by the type DraggableStyle.
We apply a cursor while dragging to give user feedback that a drag is occurring. You are welcome to override this. A good point to do this is the onDragStart event.
cursor: grabbing;To prevent the user selecting text as they drag apply this style
user-select: none;Styles applied using the data-rbd-drag-handle-context-id attribute
We apply the grab cursor to all drag handles except the drag handle for the dropping <Draggable />. At this point the user is able to drag other <Draggable />'s if they like.
cursor: grab;Same as dragging phase
When a user explicitly cancels a drag
This is the same as Phase: dropping. However we do not apply a cursor: grab to the drag handle. During a user initiated cancel we do not allow the dragging of other items until the drop animation is complete.
All styles applied are vendor prefixed correctly to meet the requirements of our supported browser matrix. This is done by hand to avoid adding to react-beautiful-dnd's size by including a css-in-js library