Блог

Я следую этому руководству, и у меня возникли проблемы с тем, что onDragStart и OnDragOver не возвращают информацию. Для большего контекста я создаю приложение типа sticky note.

   onDragStart = (e, id) => {
    e.dataTransfer.setData("id", id);
  };

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e, sect) => {
    let id = e.dataTransfer.setData("id", e.target.id);

    let notes = this.state.notes.filter((note) => {
      console.log(id);
      if (note.key == id) {
        note.section = sect;
      }
      return note;
    });

    this.setState({
      ...this.state,
      notes,
    });
  };
  

Это код, который я использовал, который не работает должным образом. Я могу перетаскивать заметки, но они не удаляются. Я полагаю, это потому, что переменная id по какой-то причине не определена. Например, если бы я удалил (note.key == id) , заметки правильно встали бы на место (но каждая заметка была бы, а не конкретная, которую я хочу).

Что касается заметок и области, которую можно удалить, вот код.

 this.state.notes.forEach((n) => {
      sections[n.section].push(
        <Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e, n.key)}
          id={n.key}
          text={n.text}
        />
      );
    });

    return (
      <div className="App">
        <div className="container-drag">
          <h2 className="header">General</h2>
          <div
            id="general"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e, "general");
            }}
          >
            {sections.general}
          </div>
        </div>
        <div className="container-drag">
          <h2 className="header">Todo</h2>
          <div
            id="todo"
            className="droppable"
            onDragOver={(e) => this.onDragOver(e)}
            onDrop={(e) => {
              this.onDrop(e, "todo");
            }}
          >
            {sections.todo}
          </div>
        </div>
      </div>
    );
  }
  

И липкий компонент просто

       <div id={this.props.id} className="draggable" draggable>
        <p>{this.props.text}</p>
      </div>
  

Я не думаю, что проблема в состоянии, поэтому я оставлю это, это просто массив объектов. Кроме того, я пытался использовать text вместо id , но я был немного сбит с толку, так что, возможно, я сделал что-то неправильно. В принципе, я пробовал консоль.регистрируя все по отдельности, безуспешно. Я не уверен, в чем проблема, но я обнаружил, что копирование-вставка кода из руководств заставило его работать идеально (но я все еще хотел использовать его самостоятельно, с отдельными компонентами).

Надеюсь, я смогу найти решение, и я ценю любую помощь или советы.

Я решил проблему.

  onDragStart = (e, id) => {
    e.dataTransfer.setData("id", id); //in brackets should be ("text/plain", id) and in the .getData below it should be (text", id)
  };

  onDragOver = (e) => {
    e.preventDefault();
  };

  onDrop = (e, sect) => {
    let id = e.dataTransfer.setData("id", e.target.id); //this shoud be .getData not .setData
  

И, наконец,

 <Sticky
          key={n.key}
          onDragStart={(e) => this.onDragStart(e, n.key)}
          id={n.key}
          text={n.text}
        />
  

onDragStart передавался как свойство, а не фактическая функция, я решил это, изменив его на