vue-drag-resize 可拖拽可缩放的标签,如何管理多个拖拽元素之间的zIndex?操作上需要保持当前激活的组件是最上层,但是在总体上,又要确保其图层管理的顺序。

麻烦总是不断出现,还好办法总比困难多,

 

1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可以实现元素的拖拽,缩放,记录位置等等,如下:

 

2.组件好用,有各种事件,参数,属性可以使用,但是也遇到了一个麻烦事,各个标签之间,如何管理多个拖拽元素之间的zIndex?拖拽过程中这是必定会遇到并且无法逃避的一个问题,操作上需要保持当前激活的组件是最上层,但是在总体上,又要确保其图层管理的顺序。维护zIndex,并且注意在删除与置换层级的时候对应的数据修改。

 

3.试着采用:一个变量记录点击次数,借用点击次数,每点击一次就把当前标签的z-index增大至点击次数 对应的数字,这样就能保证最后点击那个标签都会在最顶端,z-index都会最大,

 

4.但是事与愿违,此组件点击之后默认不能对属性的修改立刻重现,需要点击一下,再点一下,才可以达到要求

 

5.无形中大大降低了使用体验

 

 

==========================================================================

 

解决:使用 @activated =激活事件,加ref属性(激活事件参数里找不到实例对象),在组件激活时找到对应实例对象,更改标签zindex。搭配@clicked=点击事件同时使用,即可

 
js:
  点击事件(e) {  
      this.点击次数 += 1;  
      e.target.style.zIndex = this.点击次数
    },
    激活事件(item) {   
      this.点击次数 += 1;  
      this.$refs[item][0].$el.style.zIndex = this.点击次数
    },
 
 

 

Tags: