当我们在做拖拽排序时,拖拽部分有输入框,或可选中的文字不需要拖拽,官方文档给出的方法是使用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>