Alternatively, you can also use the SortableHandle HOC.
You can also use the pressDelay prop to add a delay before sorting is enabled. You can use the distance prop to set a minimum distance (in pixels) to be dragged before sorting is enabled. If you'd like to prevent this behaviour, there are a number of strategies readily available. Click events being swallowedīy default, react-sortable-hoc is triggered immediately on mousedown. This can also be a z-index issue, for example, when using react-sortable-hoc within a Bootstrap modal, you'll need to increase the z-index of the SortableHelper so it is displayed on top of the modal (see #87 for more details). If the sortable-helper gets messed up from a CSS standpoint, consider that maybe your selectors to the draggable item are dependent on a parent element which isn't present anymore (again, since the sortable-helper is at the end of the ). The original element will still be in-place to preserve its position in the DOM until the end of the drag (with inline-styling to make it invisible). Upon sorting, react-sortable-hoc creates a clone of the element you are sorting (the sortable-helper) and appends it to the end of the tag. Item disappearing when sorting / CSS issues Grid support is currently limited to a setup where all the cells in the grid have the same width and height, though we're working hard to get variable width support in the near future. Need to sort items in a grid? We've got you covered! Just set the axis prop to xy. Pressing ESC before the item is dropped will cancel the sort operations. Once an item is focused/tabbed to, pressing SPACE picks it up, ArrowUp or ArrowLeft moves it one place backward in the list, ArrowDown or ArrowRight moves items one place forward in the list, pressing SPACE again drops the item in its new position. Import React, on the outermost HTML node rendered by the component you're enhancing with SortableElement or SortableHandle.
0 kommentar(er)
