uniapp可拖拽的弹出层

Uniapp中可以使用uni-popup组件实现弹出层的功能，但是默认情况下是不能拖拽的。不过你可以借助第三方插件来实现可拖拽的弹出层。

一个比较常用的插件是vue-draggable-resizable，在Uniapp中使用时需要先安装该插件：

npm install vue-draggable-resizable

然后在需要使用可拖拽弹出层的页面引入该组件：

<template>
  <div>
    <draggable-resizable :isDraggable="true" :isResizable="false">
      <div class="popup-content">
        <!-- 弹出层内容 -->
      </div>
    </draggable-resizable>
  </div>
</template>

<script>
import DraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    DraggableResizable,
  },
};
</script>

<style>
.popup-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

这里设置`isDraggable`为`true`表示可拖拽，`isResizable`为`false`表示不可调整大小。

如果需要在拖拽时更新弹出层的位置，可以使用`@drag`事件：

<template>
  <div>
    <draggable-resizable :isDraggable="true" :isResizable="false" @drag="onDrag">
      <div class="popup-content">
        <!-- 弹出层内容 -->
      </div>
    </draggable-resizable>
  </div>
</template>

<script>
import DraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    DraggableResizable,
  },
  methods: {
    onDrag(e) {
      console.log(e.x, e.y);
      // 更新弹出层位置的代码
    },
  },
};
</script>

在`onDrag`方法中可以获取到拖拽时的坐标，然后再更新弹出层的位置即可。