Question

我正在尝试修改DragStart事件中的内容。在dom中释放元素时，将插入我想要的内容以及无法删除的另一个范围。似乎只有最新版本的Chrome才有这种情况。 Safari和Firefox还有另一种行为。

我知道这不是对React的正确使用。我尝试或多或少地重新创建此小提琴中需要的内容，您会看到拖动“测试”一词并放开它被丢弃了两个范围，一个是我在事件中输入的，另一个是我不能阻止的范围。 / p>

class Test extends React.Component {
    onDragEvent(e) {
      var elem = $(e.target);
      if ( elem.hasClass('drag')  ) {
        e.dataTransfer.setData('text/html', '<span contentEditable="false" class="drag">test dropped</span>');
        return false;
      } 
    }

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

    render() {
      return <div className="container" contentEditable="true" onDragStart={this.onDragEvent.bind(this)} >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          <span draggable="true" contentEditable="false" className="drag">test</span>
        </div>;
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('container')
);

https://jsfiddle.net/riccio82/nf9s8ozk/

拖放React元素修改事件数据的问题

0 个答案: