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

可以使用vue.draggable插件的dragend事件来判断终点是否为不可拖拽区域，如果是，则取消克隆操作。

具体实现可以参考以下代码：

<template>
  <div>
    <div class="drag-area">
      <div v-for="(item, index) in list" :key="index" class="drag-item" v-draggable="{
        clone: true,
        dragend: onDragEnd
      }">{{ item }}</div>
    </div>
    <div class="drop-area" ref="dropArea">不可拖拽区域</div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    onDragEnd(evt) {
      const dropArea = this.$refs.dropArea
      const dragItem = evt.item
      const dropRect = dropArea.getBoundingClientRect()
      const dragRect = dragItem.getBoundingClientRect()
      if (
        dragRect.left >= dropRect.left &&
        dragRect.top >= dropRect.top &&
        dragRect.right <= dropRect.right &&
        dragRect.bottom <= dropRect.bottom
      ) {
        evt.cancel = true
      }
    }
  }
}
</script>

<style>
.drag-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.drag-item {
  background-color: #eee;
  padding: 10px;
  margin-right: 10px;
}

.drop-area {
  background-color: #ddd;
  padding: 20px;
  margin-top: 20px;
}
</style>

在此示例中，我们将一个不可拖拽区域设置为一个具有ref属性的元素，并在onDragEnd方法中获取该元素的位置和拖拽元素的位置进行比较。如果拖拽元素在不可拖拽区域内，则将事件对象的cancel属性设置为true，取消克隆操作。

需要注意的是，如果你想限制拖拽的位置为一个矩形区域，上述代码可以满足需求。但如果你需要限制拖拽的位置为一个不规则区域，则需要使用更为复杂的算法来实现。