我不能在 droppable 中放置一个 draggable

问题描述

我正在使用 react-beautiful-dnd 在 React 应用中启用拖放功能。我的问题是 droppable，它无法抓住拖动的项目。

import React,{ Component } from "react";
import ReactDOM from "react-dom";
import { DragDropContext,Droppable,Draggable } from "react-beautiful-dnd";
import "./style.css";

// fake data generator
const getItems = (count) =>
  Array.from({ length: count },(v,k) => k).map((k) => ({
    id: `item-${k}`,content: `item ${k}`
  }));

// a little function to help us with reordering the result
const reorder = (list,startIndex,endindex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex,1);
  result.splice(endindex,removed);

  return result;
};

const grid = 8;

const getItemStyle = (isDragging,draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",padding: grid * 2,margin: `0 0 ${grid}px 0`,// change background colour if dragging
  background: isDragging ? "lightgreen" : "grey",// styles we need to apply on draggables
  ...draggableStyle
});

const getListStyle = (isDraggingOver) => ({
  background: isDraggingOver ? "lightblue" : "lightgrey",padding: grid,width: 250
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: getItems(10)
    };
    this.onDragEnd = this.onDragEnd.bind(this);
  }

  onDragEnd(result) {
    console.log(result);
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,result.source.index,result.destination.index
    );

    this.setState({
      items
    });
  }

  // normally you would want to split things out into separate components.
  // But in this example everything is just done in one place for simplicity
  render() {
    return (
      <div className="container">
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="droppable1">
            {(provided,snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
                className="column1"
              >
                {this.state.items.map((item,index) => (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided,snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,provided.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>

          <Droppable droppableId="droppable2">
            {(provided,snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
                className="column2"
              >
                <Draggable key="item0" draggableId="item0" index={0}>
                  {(provided,snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,provided.draggableProps.style
                      )}
                    >
                      Item 1
                    </div>
                  )}
                </Draggable>
                <Draggable
                  key="columnLayout"
                  draggableId="columnLayout"
                  index={1}
                >
                  {(provided,snapshot) => (
                    <div>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        className="container columnLayout"
                        style={getItemStyle(
                          snapshot.isDragging,provided.draggableProps.style
                        )}
                      >
                        <Droppable droppableId="droppable3">
                          {(provided,snapshot) => (
                            <div
                              {...provided.droppableProps}
                              ref={provided.innerRef}
                              style={{
                                ...getListStyle(snapshot.isDraggingOver),height: "50px"
                              }}
                            >
                              Drop an item
                              {provided.placeholder}
                            </div>
                          )}
                        </Droppable>
                        <Droppable droppableId="droppable4">
                          {(provided,marginLeft: "55px",height: "50px"
                              }}
                            >
                              Drop an item
                              {provided.placeholder}
                            </div>
                          )}
                        </Droppable>
                      </div>
                    </div>
                  )}
                </Draggable>
                <Draggable key="item2" draggableId="item2" index={2}>
                  {(provided,provided.draggableProps.style
                      )}
                    >
                      Item 3
                    </div>
                  )}
                </Draggable>
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    );
  }
}

// Put the thing into the DOM!
ReactDOM.render(<App />,document.getElementById("root"));

演示： https://codesandbox.io/s/vertical-list-forked-g23eb?file=/index.js:0-42

问题：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）