react----h5拖拽事件实现列表排序及列表切换

11 篇文章 1 订阅

实际需求,在同一个模块内部,可以通过拖拽设置排序,在拖拽时,如果进入目标区域,则成为当前模块中的一个,从原来的模块中删除当前的拖拽元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

//模块标题上面的所触发的onDrop事件,需要添加默认事件的阻止行为
  handleTitleOndrop=(index,ev)=>{
    const {dragElement,items} = this.state;
    let dataarr = this.state.type.filter((item,i)=>index==i)
    dataarr[0].list.push(dragElement)//当前模块下面的list添加当前拖拽的元素
    ev.preventDefault();
    let listArr = items;
    listArr = listArr.filter(item=>item.id !=dragElement.id )//从原列表中删除当前推拽的元素
    this.setState({
      items:listArr
    })
  }
//渲染模块类型的列表
  renderTitle(){
    return(
      <div>
          {
            this.state.type.map((item,i)=>{
              return(
                <div className='title'
                onDrop={(event)=>{this.handleTitleOndrop(i,event)}}
                >{item.name}</div>
              )
            })
          }
      </div>
    )
  }

   children=(node)=>{
    var tmp = node.childNodes;
    var arr = [];
    tmp.forEach(function(item){
         if(item.nodeType == 1){
             arr.push(item);
         }
    });
    return arr;
  }
  //拖拽开始的事件,保存当前元素的数据,然后添加一些属性
  handleStart=(data,ev)=>{
    this.setState({
      dragElement:data
    })
    ev.target.setAttribute('id', 'test1')
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }
  //e.preventDefault()必须要阻止默认事件,不然触发不了ondrop这个事件
   ondrop1=(e)=>{
    const {dragbox,n} = this.state
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    var nodes = document.getElementById(data);
    dragbox.insertBefore(nodes, this.children(dragbox)[n]);
    nodes.removeAttribute('id');
    e.dataTransfer.clearData();  
 }
    //handledragover:onDragOver,拖拽的移动事件触发,需要阻止默认事件ev.preventDefault();
   handledragover=(ev)=>{
    const {offsetTop} = this.state
    ev.preventDefault();
    const clientX = ev.clientX;
    const clientY = ev.clientY;
    let n = Math.round((clientY - offsetTop)/50) //50:带拖拽元素的高度
    this.setState({
      n:n
    })
  }
//渲染同一模块内的列表,如果要让一个原生的文本成为可以拖拽的元素,需要添加draggable="true" 
  render() {
      return (
        <div>
          {this.renderTitle()}
           <div id='dragbox'
           onDrop={(e)=>{ this.ondrop1(e)}} 
           onDragOver={(e)=>{this.handledragover(e)}} >
           {this.state.items.map((item,index)=>
              <div 
                id={`dragImg${index}`} 
                draggable="true" 
                onDragStart={(event)=>this.handleStart(item,event)}
                className='itembg'
              >{item.content}</div>
            )} 
          </div>
        </div>
      );
  }


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值