ElementUI实现Dialog弹窗拖拽

在Vue.js中使用ElementUI时，可以通过结合第三方库如vuedraggable来实现Dialog内部内容的拖拽功能。以下是一个简单的实现示例：

首先，安装vuedraggable库：

npm install vuedraggable

然后，在你的组件中使用它：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="拖拽对话框"
    @open="dialogOpened"
  >
    <vuedraggable class="dialog-body" :options="dragOptions" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </vuedraggable>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { Dialog, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import draggable from 'vuedraggable';
 
export default {
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    draggable
  },
  data() {
    return {
      dialogVisible: false,
      dragOptions: {
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      },
      items: [
        { id: 1, text: '项目 1' },
        { id: 2, text: '项目 2' },
        { id: 3, text: '项目 3' },
        // ...更多项目
      ]
    };
  },
  methods: {
    dialogOpened() {
      this.$nextTick(() => {
        const ul = this.$el.querySelector('.dialog-body');
        if (ul) {
          ul.style.height = `${ul.scrollHeight}px`;
        }
      });
    }
  }
};
</script>
 
<style>
.dialog-body {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.dialog-body li {
  cursor: move;
  margin-top: 10px;
  padding: 5px;
  background-color: #eaeaea;
  border-radius: 4px;
}
.ghost {
  opacity: 0.5;
  background-color: #dadada;
}
</style>

在这个例子中，vuedraggable组件被用来使<li>元素可拖拽。dragOptions定义了拖拽的行为，例如是否启用拖拽功能，拖拽时的效果等。dialogOpened方法确保了在Dialog打开时设置了正确的高度，以便于拖拽功能可以正常工作。