拖拽实现-并与地图交互

效果展示：

横向拖拽，并且地图中点随拖拽顺序变化

---

学习内容：

提示：这里可以添加要学的内容
例如：
1、 搭建 Java 开发环境
2、 掌握 Java 基本语法
3、 掌握条件语句
4、 掌握循环语句

---

代码：

父组件：
html部分
功能：1数据放入子组件（Draggable）的items
（由子组件Draggable渲染拖拽样式）

<Draggable :items="dragItems" @dragHandle="dragHandle(arguments)" />

引入组件

import Draggable from '../../components/DraggableArea.vue'

在data中

data(){
  return {
    dragItems:[]
  }
}

在mounted中

mounted(){
  this.getData()
}

在methods中

getData(){
  let dragpointList=JSON.parse(JSON.stringify(this.airwaylist.pointList));//对象转JSON  JSON转对象  实现深拷贝
  this.dragItems=[];
  //将航线中的航路点放入拖拽元素中
  dragpointList.forEach((item,index)=>{
     let dragcor={};
     if(item.name){
       dragcor.NAME=item.name;
       dragcor.TYPE="AIRPORT";
     }else{
       dragcor.TYPE="GPS";
     }
     dragcor.LONGITUDE=item.latlon[0];
     dragcor.LATITUDE=item.latlon[1];
      _this.dragItems.push(dragcor);
   })
}

子组件：
html
v-for循环渲染拖住样式

<template>
  <div id="item-area">
    <div class="item" :amsmidx="index" v-for="(i, index) in items" :key="index" :style="{backgroundColor: getColor(i.TYPE)}" >
      <div>
        {{getText(i)}}
      </div>
      <div id="delBtn" @click="deleteItem(index)">
      </div> 
    </div>
  </div>
</template>

mounted中
为拖拽功能做准备

mounted () {
      Sortable.create(document.getElementById('item-area'), {
        animation: 300,//动画参数
        dropOnEmpty:true,
        onEnd: evt => {//拖拽完毕之后发生该事件,不拖拽，新增航路点时不触发
          this.getElements()//删除功能/新序列存入pointlist数组，并实现联动
        }
      })
    }

methods中
每次拖拽或删除后触发，存入pointlist
（在dragHandle中实现）

getElements (delid) {
        let newList = []
        let items = document.getElementsByClassName('item')
        for (let i = 0; i < items.length; i++) {
          let idx = parseInt(items[i].getAttribute('amsmidx'))//amsmidx="index"
          if (this.items[idx]) {
            newList.push(this.items[idx])
          }
        }
        this.$emit("dragHandle",newList,delid)
      },

---