SOURCE

var dom;
var ss = new Vue({
  'el': '#root',
  data: {
    is: false,
  },
  methods: {
    layerMoveFun: function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log(e);
    },
  }
});

<div id="root">
	<div class="aa">
		<div class="a">
			<div class="item" draggable v-for="item in 5" :key="item" @dragstart="is = true" @dragend="is = false"></div>
		</div>
		<div class="b">
			<iframe ref="iframe" class="page-iframe" frameborder="no" :style="{
          height: 667 + 'px',
        }" src="https://map.baidu.com/@12725273.29,3558757.28,12z"></iframe>
			<div class="ba" :style="{
          zIndex: is ? 20 : 1,
        }" @dragover="layerMoveFun"></div>
		</div>
	</div>
</div>

.aa {
    display: flex;
    width: 900px;
    height: 500px;
    column-gap: 20px;
}

.a {
    width: 100px;
    display: flex;
    flex-direction: column;
}

.item {
    margin-bottom: 10px;
    flex: 1;
    background: pink;
}

.b {
    display: block;
    position: relative;
}

.page-iframe {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    border: 1px solid #000;
}

.ba {
    width: 500px;
    height: 500px;
    background: yellowgreen;
     position: absolute;
      left: 0;
      top: 0;
}