ElementUI 拖拽;elementui 拖拽布局

在开发中，当需要实现拖拽功能时，ElementUI 提供了多种解决方案。通过 el-draggable 组件（或结合第三方库如 vue-draggable）与 ElementUI 的布局组件相结合，可以轻松创建可拖拽的用户界面。介绍如何使用 ElementUI 实现拖拽布局，并提供详细的代码示例。

1. 使用 vue-draggable 实现拖拽列表

vue-draggable 是一个基于 Sortable.js 的 Vue 组件，它能很好地与 ElementUI 结合使用。下面是一个简单的拖拽列表示例：

html

  <div>
    
      
        
          {{ item.name }}
          删除
        
      
    
  </div>
</p>


import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { name: '项目 1' },
        { name: '项目 2' },
        { name: '项目 3' }
      ]
    }
  },
  methods: {
    onDragEnd(event) {
      console.log('拖拽结束', event)
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}



.drag-item {
  cursor: move;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.drag-item:last-child {
  border-bottom: none;
}


<p>

2. 创建可拖拽的卡片布局

我们可以通过结合 el-card 和 vue-draggable 来创建一个可拖拽的卡片式布局：

html

  <div>
    
      
        
          <div class="clearfix">
            <span>{{ card.title }}</span>
            删除
          </div>
          <div>{{ card.content }}</div>
        
      
    
  </div>
</p>


import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      cards: [
        { id: 1, title: '卡片 1', content: '这是卡片内容 1' },
        { id: 2, title: '卡片 2', content: '这是卡片内容 2' },
        { id: 3, title: '卡片 3', content: '这是卡片内容 3' }
      ]
    }
  },
  methods: {
    removeCard(id) {
      this.cards = this.cards.filter(card => card.id !== id)
    }
  }
}



.drag-card {
  margin-bottom: 10px;
  width: 300px;
}


<p>

3. 创建多列拖拽布局

有时我们需要创建一个多列的拖拽布局，允许元素在不同列之间移动：

html

  <div class="columns">
    
      
        
          {{ item.name }}
        
      
    
  </div>
</p>


import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      columns: [
        {
          title: '列 1',
          items: [{ id: 1, name: '项目 1' }, { id: 2, name: '项目 2' }]
        },
        {
          title: '列 2',
          items: [{ id: 3, name: '项目 3' }, { id: 4, name: '项目 4' }]
        },
        {
          title: '列 3',
          items: []
        }
      ]
    }
  }
}



.columns {
  display: flex;
}
.drag-item {
  margin-bottom: 10px;
}


<p>

以上三种方法都可以很好地实现 ElementUI 的拖拽布局功能。根据实际需求选择合适的方案：
- 如果只需要简单的列表拖拽，种方法最简单直接
- 如果需要更复杂的卡片式布局，第二种方法更适合
- 对于多列布局的需求，第三种方法提供了的解决方案

需要注意的是，在使用这些拖拽功能时，要确保数据的同步更新，特别是在涉及到跨组件通信时。同时要注意处理好样式，以提供良好的用户体验。