当我们在做拖拽排序时，拖拽部分有输入框，或可选中的文字不需要拖拽，官方文档给出的方法是使用filter排除拖拽元素。这样做有个弊端，使用 filter 禁止拖拽后，filter禁止标签下的输入框，无法输入。

这时我们可以用到另一个disabled属性去解决。当输入框获取焦点时，disabled为true，禁用拖拽操作，这时可以复制输入框中的数据。当输入框获取失去时，disabled为false，可拖拽。

<draggable v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in myArray" :key="item.id">
        <el-input v-model="input" @focus="disabled=true" @blur="disabled=false" placeholder="请输入内容"></el-input>
        {{item.name}}
     </div>
    </transition-group>
</draggable>

<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return { 
      disabled:false,
      input: '',
      myArray: [
        {people:'cn',id:10,name:'www.itxst.com'},
        {people:'cn',id:20,name:'www.baidu.com'},
        {people:'cn',id:30,name:'www.taobao.com'},
        {people:'us',id:40,name:'www.yahoo.com'}]
    };
  },
};
</script>