Question

我有一个具有拖放功能绑定的Container

        constructor(props,context) {
            super(props,context);
            this.allowDrop = this.allowDrop.bind(this);
            this.drag = this.drag.bind(this);
            this.drop = this.drop.bind(this);
            this.dragOver = this.dragOver.bind(this);
}



      allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData('text', ev.target.id);
    ev.dataTransfer.effectAllowed = 'move';
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData('text');
    console.log(ev);
    ev.target.appendChild(document.getElementById(data));
  }

  dragOver(ev) {
    ev.preventDefault();
  }

和表现性成分

<div className="row">
    <div className="col-xs-6">
      <p className="lead">Possibilities</p>
      <ul onDrop={props.drop} onDragOver={props.allowDrop} style={{listStyle:'none',border:'1px solid #ccc',padding:'5px',overflow:'scroll',borderRadius:'3px',minHeight:'100px'}}>
        <li id='drag1' draggable='true' onDragStart={props.drag} style={{userSelect:'none'}}>item 1</li>
        <li id='drag2' draggable='true' onDragStart={props.drag}>item 2</li>
        <li id='drag3' draggable='true' onDragStart={props.drag}>item 3</li>
      </ul>
    </div>

    <div className="col-xs-6">
      <p className="lead">Selected</p>
      <ul onDrop={props.drop} onDragOver={props.allowDrop} style={{listStyle:'none',border:'1px solid #ccc',padding:'5px',overflow:'scroll',borderRadius:'3px',minHeight:'100px'}}>
      </ul>
    </div>
  </div>

我面临的问题是，当我尝试重新排序时，一个李正在将孩子作为孩子筑巢。

问题是drop函数我需要引用ul ..怎么做？

Answer 1

在放置处理程序中，ev.currentTarget应该引用您的ul项目。

HTML5拖放与反应

1 个答案: