拖拽选择区域组件

  项目需求:选择广告的投放时段

  最终实现效果：

　　

 主要总结实现点击拖拽选择区域的效果(封装成一个vue组件)，具体数据请求与渲染依具体情况而定。

 主要思路：要实现鼠标拖拽选择区域的效果，主要是表格中td元素的mousedown,mouseover,mouseup事件的处理。

1.  在mousedown事件中记录起始点，高亮当前选中元素
2.  在mouseover事件中渲染选中区域
3.  mouseup事件，数据的重置处理。 

需要注意的点：

1.  在vue中，当给元素绑定三个事件后，mouseove事件会在鼠标经过元素时立即触发，所以需要设置一个标志位，在mousedown事件触发后，mouseover事件才会被触发。
2.  拖拽过程中存在反复拖拽的问题，应该以最后一次的位置为准，之前即时渲染的区域应该及时清除，所以应该记录下拖拽的最大值，在渲染区域之前，清除无用区域。
3.  拖拽到表格区域外的处理，如果拖拽带表格区域外，标志位不能及时重置，元素的mouseover事件会一直被触发，所以监听整个dom元素的mouseleave事件，及时重置标志位。

 

功能相关代码：

 

Vue.component("drag-component",{
  props:['data'],
  template: '<table class="time_table table" v-on:mouseleave="mouseleave">'+
  '<thead><tr><th rowspan="2">日期/时间</th></tr><tr><th  class="unselectable" v-for="num in numData">{{num}}</th>'+
  '</tr></thead><tbody> <tr v-for="(options,index) in timeData" >'+
  '<th scope="row">{{options.date}}</th>'+
  '<td v-for="(timeItem,key) in options.time":class="[{ \'active_select\': timeItem.isSelected}]" v-on:mousedown="mousedown(index,key)"  v-on:mouseover="mouseover(index,key)" v-on:mouseup="mouseup"></td></tr></tbody></table>',
  data: function(){
      return {
          numData:[0,1,2,3,4,5,6,7,8,9,10],
        timeData:this.data,
        selectFlag:false, //当参数为true时，mouseover事件生效
        max:{
              x:0,
            y:0
          }
      }
  },
  methods:{
      mousedown:function(index,key){
              this.selectStart=[];
              this.selectFlag=true;
              if(this.timeData[index].time[key].value==false){
                  if(this.timeData[index].time[key].isSelected){
                      this.timeData[index].time[key].isSelected=false;
                  }else {
                      this.$set(this.timeData[index].time[key],"isSelected",true);
                  }
              }
              this.selectStart.push({
                  index:index,
                  key:key
              });
      },
      mouseover:function(index,key){
          // x 垂直方向  y 水平方向
          if(this.selectFlag){
              if(index>=this.max.x){
                      this.max.x=index;
                  }
                  if(key>=this.max.y){
                      this.max.y=key;
                  }
                  var start={
                      x:this.selectStart[0].index,
                      y:this.selectStart[0].key
                  };
                  var end={
                      x:index,
                      y:key
                  };
                  for(var i=end.x;i<=this.max.x;i++){
                      for(var j=end.y;j<=this.max.y;j++){
                          this.$set(this.timeData[i].time[j], "isSelected", false);
                      }
                  }
                  /* 渲染选中的区域 */
                  for(var i=start.x;i<=end.x;i++){
                      for(var j=start.y;j<=end.y;j++){
                            this.$set(this.timeData[i].time[j], "isSelected", true);
                      }
                  }

              }
      },
      mouseup:function () {
          this.selectFlag=false;
          this.max={
              x:0,
              y:0
          }
      },
      mouseleave:function () {
          this.selectFlag=false;
      }
  }
});

调用部分：

css部分(以需求为准，简单写了下样式)：

    .time_table {
            border:1px solid #ccc;
            border-collapse:collapse;
        }
        .time_table th,.time_table td {
            border: 1px solid #ccc;
            width: 30px;
            height: 40px;
        }
        .active_select {
            background: cornflowerblue;
        }