vue实现拖动盒子修改数组顺序

最新推荐文章于 2024-04-11 08:52:08 发布

CC.小白

最新推荐文章于 2024-04-11 08:52:08 发布

阅读量430

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45282557/article/details/127993587

版权

<div class="g-auto-bottom">
	<ul class="selected">
		<li class="g-project-item active" :class="{'grayLi':index==1||index==0||index==2}"
			v-for="(item,index) in selectList" :key="item.showConfigFieldId"
			:data-index="index" :draggable="index>2"
			@dragstart.stop="changeDragStart($event,'selected',index)"
			@dragend.stop="changeDragEnd($event,index)"
		    @dragover.stop="handleDragOver($event,selectList,'selected',index)">
			{{item.showConfigFieldDesc}}
	    </li>
	</ul>
</div>
///vue data里边需要加上
data() {
  return {
      selectList:[
		{showConfigFieldDesc:'1111'},
		{showConfigFieldDesc:'1222'},
		{showConfigFieldDesc:'1333'},
		{showConfigFieldDesc:'1444'},
	  ],
	  typeDrag: {
        startIndex: -1,//被拖拽元素的索引
         activeIndex: 0,//目标元素的索引
       },
   }
}
//方法里加上methods
methods:{
	changeDragStart(el,active,index) { //开始拖动时的数据
        if(index==0){
          return
        }
        this.activeDrag = active;
        this.startPageX = el.pageX;
        this.startPageY = el.pageY;
        this.findParent(el.target);
        this.typeDrag.startIndex = this.parentnode.getAttribute('data-index');

      },
      changeDragEnd(el,index) {
        if(index==0){
          return
        }
        this.typeDrag.startIndex = -1;
      },
      handleDragOver(el,list,active,index) {
        if(index==0 || index==1 || index==2){ //限制前几个盒子不可拖动
          return
        }
        el.preventDefault();//重要
        el.dataTransfer.dropEffect = 'move';
        this.findParent(el.target);
        const pageX = el.pageX - this.startPageX, pageY = el.pageY - this.startPageY;
        const offsetWidth = this.parentnode.offsetWidth / 2, offsetHeight = this.parentnode.offsetHeight / 2;
        this.typeDrag.activeIndex = this.parentnode ? this.parentnode.getAttribute('data-index') : null;
        if (this.typeDrag.activeIndex != null) {
          let x = this.typeDrag.startIndex, y = this.typeDrag.activeIndex;
          if (pageY > offsetHeight || pageY < -offsetHeight) {
            this.startPageY = el.pageY;
            list.splice(y, 0, ...list.splice(x, 1));
            this.typeDrag.startIndex = y;
          } else if (pageX > offsetWidth || pageX < -offsetWidth) {
            this.startPageX = el.pageX;
            list.splice(y, 0, ...list.splice(x, 1));
            this.typeDrag.startIndex = y;
          }
        }
      },
      findParent(node) {
        if (node.className.indexOf('g-project-item') > -1) {
          this.parentnode = node
        } else {
          this.parentnode = false;
          if (node.parentNode.nodeName.toLowerCase() != 'body') {
            this.findParent(node.parentNode)
          }
        }
      },

}