快速搞定 Vue.Draggable 官网 Bug：多列拖拽，某列为空时无法拖拽问题！

好的，我来帮你解决这个问题：

在使用 Vue.Draggable 进行多列拖拽时，我们可能会遇到一个问题：当某一列为空时，该列中的元素无法拖动。这可能是由多个因素引起的，例如样式问题、内部高度问题等。本文将通过逐步剖析 Vue.Draggable 官网的 bug，帮助您轻松解决这个问题，让您的拖拽操作更流畅、更顺手！

1. 问题分析：

   首先，我们先分析一下问题的原因。通过仔细调试样式，我们可以发现，核心问题就在于解决内部高度问题。只要把内部的高度设置为非 0，例如设置最小高度或父元素高度，就可以解决问题。

2. 解决方法：

   根据上述分析，我们可以采用以下方法解决这个问题：

   • 在 CSS 中，为拖拽元素的父元素设置一个最小高度。
   • 在 JavaScript 中，动态计算拖拽元素的高度，并将其作为父元素的最小高度。

3. 代码示例：

   <div id="app">
     <draggable :list="items">
       <div v-for="item in items" :key="item.id">{{ item.name }}</div>
     </draggable>
   </div>
   

   const app = new Vue({
     el: '#app',
     data() {
       return {
         items: [
           { id: 1, name: 'Item 1' },
           { id: 2, name: 'Item 2' },
           { id: 3, name: 'Item 3' },
         ],
       };
     },
     methods: {
       calculateHeight() {
         const maxHeight = Math.max(...this.items.map(item => item.offsetHeight));
         return maxHeight + 'px';
       },
     },
     computed: {
       minHeight() {
         return this.calculateHeight();
       },
     },
   });
   

4. 效果验证：

   现在，我们就可以在浏览器中运行代码并测试一下效果了。您会发现，即使某一列为空，其中的元素也可以正常拖动。

5. 总结：

   通过本文的学习，您已经掌握了如何解决 Vue.Draggable 官网中多列拖拽时某列为空导致无法拖拽的问题。如果您遇到类似的问题，可以参考本文中的方法进行解决。