使用vue.draggable的pull:'clone'属性，如何限制拖拽终点为不可拖拽的区域时，不执行克隆操作

可以在拖拽过程中，判断拖拽终点是否在不可拖拽的区域，如果是，则取消克隆操作。可以使用dragover事件来实现这个功能，具体步骤如下：

1. 在可拖拽元素上添加dragstart事件，设置event.dataTransfer.effectAllowed为'copy'，并添加event.dataTransfer.setData方法，将需要克隆的数据写入dataTransfer对象。

2. 在不可拖拽的区域上添加dragover事件，通过event.preventDefault()方法来阻止默认行为，然后判断拖拽终点是否在不可拖拽的区域，如果是，则取消克隆操作，可以使用event.dataTransfer.dropEffect = 'none'来实现。

3. 在可拖拽元素上添加dragend事件，清空dataTransfer对象中的数据。

示例代码如下：

<template>
  <div>
    <div class="draggable-item"
         v-for="(item, index) in list"
         :key="item.id"
         :draggable="true"
         @dragstart="dragStartHandler(item, index)"
         @dragend="dragEndHandler">
      {{ item.name }}
    </div>
    <div class="drop-area"
         @dragover="dragOverHandler"
         @drop="dropHandler">
      不可拖拽区域
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' }
      ],
      cloneData: null
    }
  },
  methods: {
    dragStartHandler(item, index, event) {
      event.dataTransfer.effectAllowed = 'copy'
      this.cloneData = item
      event.dataTransfer.setData('text/plain', JSON.stringify(item))
    },
    dragEndHandler() {
      this.cloneData = null
    },
    dragOverHandler(event) {
      event.preventDefault()
      // 判断是否在不可拖拽区域
      if (event.target.classList.contains('drop-area')) {
        event.dataTransfer.dropEffect = 'none'
      }
    },
    dropHandler(event) {
      if (this.cloneData) {
        // 克隆操作
        this.list.push({
          id: this.list.length + 1,
          name: this.cloneData.name
        })
      }
    }
  }
}
</script>