Реагировать Drag and Drop: Div Отклоняет Drag - PullRequest
Новая
       45

Реагировать Drag and Drop: Div Отклоняет Drag

1 голос
/ 16 октября 2019

Я попытался создать приложение реакции, которое имеет функцию перетаскивания списка без загрузки каких-либо внешних пакетов. Я нашел учебник , предназначенный именно для этого

Это мой код: 

class App extends React.Component {
  state = {
    items: ["3", "2", "1", "4"]
  };

  onDragStart = (e, index) => {
    console.log("drag start!!!");
    this.draggedItem = this.state.items[index];
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", e.target.parentNode);
    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
  };

  onDragOver = index => {
    const draggedOverItem = this.state.items[index];

    // if the item is dragged over itself, ignore
    if (this.draggedItem === draggedOverItem) {
      return;
    }

    // filter out the currently dragged item
    let items = this.state.items.filter(item => item !== this.draggedItem);

    // add the dragged item after the dragged over item
    items.splice(index, 0, this.draggedItem);

    this.setState({ items });
  };

  onDragEnd = () => {
    this.draggedIdx = null;
  };

  render() {
    return (
      <div className="App">
        <main>
          <h3>List of items</h3>
          <ul>
            {this.state.items.map((item, idx) => (
              <li key={item} onDragOver={() => this.onDragOver(idx)}>
                <div
                  className="drag"
                  draggable
                  onDragStart={e => this.onDragStart(e, idx)}
                  onDragEnd={this.onDragEnd}
                  style={{ cursor: "pointer" }}
                />
                <span className="content" style={{ cursor: "pointer" }}>
                  {item}
                </span>
              </li>
            ))}
          </ul>
        </main>
      </div>
    );
  }
}

Я не получаю никаких ошибок в консоли. Тем не менее, элементы в списке отказываются от перетаскивания. При случайном шансе, что я могу перетащить предмет, я не могу получить его туда, куда я хочу, и он вводит странный пробел / пробел: enter image description here

Это мои коды и коробка: https://codesandbox.io/s/angry-dewdney-xzhsi

1 Ответ

2 голосов
/ 17 октября 2019

Попробуйте изменить рендер, чтобы перетаскиваемый div обернул промежуток текстом следующим образом: 

<div
 className="drag"
 draggable
 onDragStart={e => this.onDragStart(e, idx)}
 onDragEnd={this.onDragEnd}
 style={{ cursor: "pointer" }}
>
   <span className="content" style={{ cursor: "pointer" }}>
      {item}
   </span>
</div>

В противном случае вы должны нажать на пустой div, который будет почти невозможен, как вы заметили. Таким образом, перетаскиваемый элемент div оборачивает текст, поэтому каждый раз, когда вы нажимаете на текст, вы нажимаете элемент div.

...