How to use the react-beautiful-dnd.Draggable 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-transfer / build / list.js View on Github 
renderedEl = _renderItem.renderedEl;
if (filter && filter.trim() && !_this4.matchFilter(renderedText, item)) {
return null;
}
// all show items
totalDataSource.push(item);
if (!item.disabled) {
filteredDataSource.push(item);
}
var checked = checkedKeys.indexOf(item.key) >= 0;
return _react2["default"].createElement(
_reactBeautifulDnd.Draggable,
{ key: item.key, index: index, draggableId: '' + item.key, isDragDisabled: draggable ? item.disabled : !draggable },
function (provided, snapshot) {
return _react2["default"].createElement(
'div',
_extends({
ref: provided.innerRef
}, provided.draggableProps, provided.dragHandleProps, {
// onClick={(event) =>this.handleDrag(event, provided, snapshot, item)}
onKeyDown: function onKeyDown(event) {
return _this4.onKeyDown(event, provided, snapshot, item);
}
// className={classnames({
// ...getClass(this.props,snapshot.isDragging).drag
// })}
, style: _extends({}, provided.draggableProps.style) }),
_react2["default"].createElement(_item2["default"]exports.default = function (_ref) {
var children = _ref.children,
id = _ref.id,
onClick = _ref.onClick,
props = _objectWithoutProperties(_ref, ['children', 'id', 'onClick']);
return _react2.default.createElement(
_reactBeautifulDnd.Draggable,
{ draggableId: id },
function (provided, snapshot) {
var onClickNew = onClick ? function () {
// dragHandleProps might be null
if (!provided.dragHandleProps) {
return onClick;
}
return function (event) {
provided.dragHandleProps.onClick(event);
onClick(event);
};
}() : provided.dragHandleProps.onClickDrag;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(data.map(function (item, index) {
return _react2.default.createElement(
_reactBeautifulDnd.Draggable,
{ key: item.id, draggableId: item.id, type: listType },
function (dragProvided, dragSnapshot) {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_Item2.default, {
key: item.id,
index: index,
item: item,
isDragging: dragSnapshot.isDragging,
provided: dragProvided,
autoFocus: _this.props.autoFocusId === item.id,
selected: selectedId && selectedId === item.id,
onClick: function onClick() {
return onClickItem(item, index);
},_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(
'div',
_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
);
}
);_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(
'div',
_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
);
}
);_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({
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.placeholderdefaultClassNameDragged: 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'];const DND = require('react-beautiful-dnd');
exports.dragDropContextClass = DND.DragDropContext;
exports.draggableClass = DND.Draggable;
exports.droppableClass = DND.Droppable;react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React
