react-beautiful-dnd

container.js

<div className="dragDropContainer">
              <DragDropContext onDragEnd={this.onDragEnd}>
                <DroppableZone
                  items={this.state.include}
                  segId={'segmentation-list_include'}
                  droppableId={'droppable_include'}
                  title={'Include'}
                />
                <div className="segmentation-list container-drag flex-grow">
                  <div className="header-container">
                    <span className="header-title">Ultra Segmentações</span>
                    <span className="line" />
                  </div>
                  <div id="segmentation-list">
                    <Droppable droppableId="droppable">
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          style={getListStyle(snapshot.isDraggingOver)}
                        >
                          {size(ultrasegList) >= 1 ? (
                            map(this.state.items, (seg, index) => (
                              <DraggableCard
                                key={seg.id}
                                seg={seg}
                                index={index}
                                dragDisabled={seg.status === 'processing'}
                              />
                            ))
                          ) : (
                            <div className="no-segmentations">
                              <p>No cards</p>
                            </div>
                          )}
                          {provided.placeholder}
                        </div>
                      )}
                    </Droppable>
                  </div>
                </div>
                <DroppableZone
                  items={this.state.exclude}
                  segId={'segmentation-list_exclude'}
                  droppableId={'droppable_exclude'}
                  title={'Remove'}
                 />
</DragDropContext>
            </div>

draggableCard.js

import { Draggable } from 'react-beautiful-dnd';
import DraggableCard from './draggableCard';

const DraggableCard = ({ seg, index, dragDisabled }) => (
  <Draggable
    key={seg.id}
    draggableId={seg.id}
    index={index}
    isDragDisabled={dragDisabled}
  >
    {(provided, snapshot) => (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
        className="draggable"
      >
        <div
          className="segmentation-card"
          key={index}
          style={{ cursor: dragDisabled ? 'not-allowed' : 'grab' }}
        >
          <div
            className="image"
            style={{
              backgroundColor: dragDisabled ? 'rgb(132, 132, 132)' : seg.color,
            }}
          >
            {(() => {
              if (!isEmpty(seg.icon) && !dragDisabled) {
                return parseIconModule(seg.icon, '#ffffff');
              } else if (dragDisabled) {
                return <img src="/img/icons/load_segmentation.svg" />;
              } else {
                return <img src="/img/segmentations/bell.svg" />;
              }
            })()}
          </div>
          <div className="name">
            <a title={seg.name}>{seg.name}</a>
            <span />
          </div>
        </div>
      </div>
    )}
  </Draggable>
);

droppableZone.js

import { Droppable } from 'react-beautiful-dnd';

const DroppableZone = ({ items, segId, droppableId, title, dataTip }) => {
  return (
    <div id={segId} className="segmentation-list container-drag">
      <div className="header-container">
        <span className="header-title">{title}</span>
        <a id={droppableId} className="info-icon" data-tip={dataTip}>
          <Icon icon="question-circle-o" />
        </a>
        <span className="line" />
      </div>
      <Droppable droppableId={droppableId}>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            style={getListStyle(snapshot.isDraggingOver)}
          >
            {map(items, (seg, index) => (
              <DraggableCard
                key={seg.id}
                seg={seg}
                index={index}
                dragDisabled={false}
              />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
};