bee-tree组件拖拽

@whizbz11 2018-05-03 03:24:41发表于 iuap-design/blog

bee-tree组件拖拽

bee-tree简介

  bee-tree是使用react编写的树组件,封装了常用的点击、选中、展开、收起、拖拽等事件。这里咱们聊聊bee-tree的拖拽事件。
  关于拖拽事件,bee-tree提供了节点上的onDragStart、onDragEnter、onDragLeave、onDrop、onDragEnd相关事件。如果在节点上相互拖拽,bee-tree也提供了相关示例,请参考这里,如果将节点拖拽到其他地方,那怎么写呢?先来了解下拖拽内容。

拖拽API

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。下面是相关api

  • DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
  • draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
	<div title="拖拽我" draggable="true">列表1</div>
  • ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
  • ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
  • ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
  • ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
  • ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
  • Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  • Event.effectAllowed 属性:就是拖拽的效果。

bee-tree拖拽示例

了解基本拖拽api,来看下具体如何使用。下面示例实现了将拖拽的节点放到某一目标区域。

  • 在拖拽节点上添加onDragStart 事件,并使用dataTranster保存相关节点的信息
  • 在目标元素上添加onDro事件
    具体代码:
class Demo3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gData,
      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
    };
    this.onDragStart = this.onDragStart.bind(this);

  }
  /**
   * 拖拽元素开始拖拽时的方法
   * @param {obj} info 含有事件类型和当前节点信息
   */
  onDragStart(info) {
    console.log(info);
    info.event.dataTransfer.setData('value', info.node.props.eventKey);
  }
  /**
   * 拖拽元素在目标元素头上移动的时候
   * 在目标元素上触发的事件
   * 注意:这个函数必须使用e.preventDefault();阻止一些默认事件,否则onDrop事件不执行
   */
  toDragOver = (e) => {

    e.preventDefault();
    e.stopPropagation();
    return false;
  };

  /**
   * 拖拽元素在目标区域释放鼠标时触发的事件
   */
  toDrop = (e) => {
    e.preventDefault();
    console.log('--我是onDrop事件--' + e.dataTransfer.getData('value'));
    debugger;
  }
  render() {
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.key} />;
    });

    return (
      <div>
        <Tree
          defaultExpandedKeys={this.state.expandedKeys}
          draggable
          onDragStart={this.onDragStart}
        >
          {loop(this.state.gData)}
        </Tree>
        <div style={{ marginLeft: '550px', border: "1px solid ", height: '500px' }} onDrop={this.toDrop} onDragOver={this.toDragOver} >
          我是垃圾桶
        </div>
      </div>

    );
  }
};