CesiumJS第3篇，前端使用Vue和Element实现可拖动弹框效果，并使用mixins混入特性实现，不影响底层元素操作（Cesium上可拖拽的实时视频播放弹框，底层元素可以正常操作）

<template>
  <el-dialog
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="cesium-viewer-dialog"
  >
    <div class="dialog-content" @mousedown="startDrag">
      <!-- 内容 -->
    </div>
  </el-dialog>
</template>
 
<script>
export default {
  mixins: [VueCesiumMixins.draggable],
  props: {
    // 父组件传入的属性
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    startDrag(event) {
      if (this.draggable) {
        this.startDragging(event);
      }
    }
  }
}
</script>
 
<style scoped>
.dialog-content {
  cursor: move; /* 更改鼠标形状表示可拖动 */
}
</style>

这个代码实例展示了如何在Vue组件中使用Element UI的el-dialog组件，并通过mixins混入了拖动的特性。它定义了一个可拖动的弹窗，其中包含自定义的内容。这个例子简化了原始代码，并展示了如何将拖动功能应用于实际的用户界面组件。