How to use the react-beautiful-dnd.Droppable function in react-beautiful-dnd
To help you get started, weโve selected a few react-beautiful-dnd examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
iuap-design / bee.tinper.org / tinper-bee / bee-dnd / build / SortList.js View on Github 
onDrag = _props.onDrag,
onStop = _props.onStop,
onDragUpdate = _props.onDragUpdate,
dropClass = _props.dropClass,
dropOverClass = _props.dropOverClass,
dragClass = _props.dragClass,
dragingClass = _props.dragingClass,
showKey = _props.showKey,
type = _props.type;
return _react2["default"].createElement(
_reactBeautifulDnd.DragDropContext,
{ onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
_react2["default"].createElement(
_reactBeautifulDnd.Droppable,
{ droppableId: 'droppable', direction: type },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
{
ref: provided.innerRef,
className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop))
},
_this2.state.items.map(function (item, index) {
return _react2["default"].createElement(
_reactBeautifulDnd.Draggable,
{ key: index, draggableId: '' + index, index: index },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
_extends({const DND = require('react-beautiful-dnd');
exports.dragDropContextClass = DND.DragDropContext;
exports.draggableClass = DND.Draggable;
exports.droppableClass = DND.Droppable;_extends({
ref: provided.innerRef
}, provided.draggableProps, provided.dragHandleProps, {
className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
style: _extends({}, provided.draggableProps.style) }),
showKey ? item[showKey] : item
);
}
);
}),
provided.placeholder
);
}
),
_react2["default"].createElement(
_reactBeautifulDnd.Droppable,
{ droppableId: 'droppable2', direction: type == 'betweenVertical' ? 'vertical' : 'horizontal' },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
{
ref: provided.innerRef,
className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop)) },
_this2.state.selected.map(function (item, index) {
return _react2["default"].createElement(
_reactBeautifulDnd.Draggable,
{
key: '2' + index,
draggableId: '2' + index,
index: index },
function (provided, snapshot) {
return _react2["default"].createElement(showKey = _props.showKey,
type = _props.type;
return _react2["default"].createElement(
'div',
{ className: (0, _classnames2["default"])({
'u-drag-between': type == 'betweenVertical',
'u-drag-between u-drag-between-horizontal': type == 'betweenHorizontal'
}) },
_react2["default"].createElement(
_reactBeautifulDnd.DragDropContext,
{ onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
_react2["default"].createElement(
_reactBeautifulDnd.Droppable,
{ droppableId: 'droppable', direction: type == 'betweenVertical' ? 'vertical' : 'horizontal' },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
{
ref: provided.innerRef,
className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop)) },
_this2.state.items.map(function (item, index) {
return _react2["default"].createElement(
_reactBeautifulDnd.Draggable,
{
key: '1' + index,
draggableId: '1' + index,
index: index },
function (provided, snapshot) {
return _react2["default"].createElement(var list = function list(_ref) {
var children = _ref.children,
_ref$group = _ref.group,
group = _ref$group === undefined ? 'dnd' : _ref$group,
props = _objectWithoutProperties(_ref, ['children', 'group']);
return _react2.default.createElement(
_reactBeautifulDnd.Droppable,
{ droppableId: group },
function (provided, snapshot) {
return _react2.default.createElement(
_list2.default,
_extends({
_ref: provided.innerRef,
style: getListStyle(snapshot.isDraggingOver)
}, props),
children,
provided.placeholder
);
}
);
};value: function render() {
var _this2 = this;
var _props = this.props,
ignoreContainerClipping = _props.ignoreContainerClipping,
internalScroll = _props.internalScroll,
isDropDisabled = _props.isDropDisabled,
listId = _props.listId,
listType = _props.listType,
dropBackgroundColor = _props.dropBackgroundColor,
style = _props.style;
return _react2.default.createElement(
_reactBeautifulDnd.Droppable,
{
droppableId: listId,
ignoreContainerClipping: ignoreContainerClipping,
isDropDisabled: isDropDisabled,
type: listType
},
function (dropProvided, dropSnapshot) {
return _react2.default.createElement(
Wrapper,
{
style: style,
isDraggingOver: dropSnapshot.isDraggingOver,
isDropDisabled: isDropDisabled,
dropBackgroundColor: dropBackgroundColor
},
internalScroll ? _react2.default.createElement({ className: prefixCls + '-body-search-wrapper' },
_react2["default"].createElement(_search2["default"], {
prefixCls: prefixCls + '-search',
onChange: this.handleFilter,
handleClear: this.handleClear,
placeholder: searchPlaceholder,
value: filter
})
) : null;
var listBody = bodyDom || _react2["default"].createElement(
'div',
{ className: showSearch ? prefixCls + '-body ' + prefixCls + '-body-with-search' : prefixCls + '-body' },
search,
_react2["default"].createElement(
_reactBeautifulDnd.Droppable,
{ droppableId: 'droppable_' + id, direction: 'vertical', isDropDisabled: !draggable },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
{ ref: provided.innerRef, key: id, className: prefixCls + '-content' },
_react2["default"].createElement(
'div',
{ style: { display: 'none' } },
provided.placeholder
),
_react2["default"].createElement(
_beeAnimate2["default"],
{
component: 'ul',
transitionName: _this4.state.mounted ? prefixCls + '-content-item-highlight' : '',
transitionLeave: falsedefaultClassNameDragging: this.props.dragingClass,
defaultClassNameDragged: this.props.draggedClass
}, this.props),
self.props.children
)
);
};
return Dnd;
}(_react.Component);
Dnd.propTypes = propTypes;
Dnd.defaultProps = defaultProps;
Dnd.Drag = _reactDraggable2["default"];
Dnd.DragDropContext = _reactBeautifulDnd.DragDropContext;
Dnd.Droppable = _reactBeautifulDnd.Droppable;
Dnd.Draggable = _reactBeautifulDnd.Draggable;
Dnd.GridLayout = _GridLayout2["default"];
exports["default"] = Dnd;
module.exports = exports['default'];react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React
