嵌套了 element-ui 的表单 el-form-item

   //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    changes(evt) {
      console.log(evt);
    begin(evt) {
       console.log(evt);
    end(evt) {
      console.log(evt);
      evt.item; //可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    transfore(evt, originalEvent) {
      console.log(evt);
      console.log(originalEvent); //鼠标位置
有例子中还有<transition-group>   我没有用到   官方给的例子  https://david-desmaisons.github.io/draggable-example/  中有  有需要的 可以去看看
 
github地址：https://github.com/SortableJS/Vue.Draggable
 
更详细的 vue.draggable 中文文档：http://www.itxst.com/vue-draggable/tutorial.html
 
                    Sortable.js 的 vue 组件安装npm i -S vuedraggable页面 js：import draggable from "vuedraggable"components: {     draggable  },页面 html ：                &lt;draggable                class="syllable_ul"                style="padding-left: 0; marg.
				
大概支持以下功能：新增数据、删除数据，表单的拖拽，并在拖拽同时修改对应数据list的顺序，demo如下：
拖拽功能使用了Vue.Draggable，控件使用ElementUI的Form表单。
实现其实是比较容易的：
<template>
  <el-form :model="domains">
    <el-form-item><el-button t...
	ondragover、ondrop在写回调时须添加:
		默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
	    e.preventDefault();
	    e.stopPropagation();
在拖动目标上触发事件 (源元素):
				
箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
箭头函数既然可以访问外层代码块的this，同事也方便了调用外部常量变量及方法。
        //重新排列顺序
        anewTabIndex(){
          for (let i = 0; i < this.tableDataShuttle.length; i++) {
            this.tableDataShuttle[i].i
    <a-draggable class="drag-wrapper" :list="list" :item-key="item => item.id">
      <div v-for="item in list" :key="item.id" class="drag-item">{{ item.content }}</div>
    </a-draggable>
</template>
<script>
import { ADraggable } from 'ant-design-vue';
export default {
  components: {
    ADraggable,
  data() {
    return {
      list: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' },
        { id: 4, content: 'Item 4' },
</script>
在上面的示例中，我们首先引入了 `ADraggable` 组件，并将其注册到当前组件中。然后在模板中使用 `a-draggable` 标签包裹要进行拖拽排序的元素，其中 `list` 是要排序的数据列表，`item-key` 属性用来指定每个元素的唯一标识符。
在 `a-draggable` 组件内部，我们使用 `v-for` 指令遍历 `list` 中的数据，并将每个元素渲染为一个 `div` 标签。这里要注意，我们给每个 `div` 标签指定了 `key` 属性，这样可以帮助 Vue 更好地追踪每个元素的变化。
最后，在样式中定义好拖拽排序元素的样式即可：
```css
.drag-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
.drag-item {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
这样就实现了一个简单的拖拽排序功能。