vue基于vuedraggable实现拖拽

Posted 2022-11-01 xanlv

进入项目目录

npm i vuedraggable -S

在vue页面 script 中引入并且注册

<!-- 1组无法拖拽到2组 -->
<draggable  v-model="resultList" @end="dragged">
<div v-for="item in resultList" v-if='item.group_flag==1' :title="item.id">
	<ul>
		<li>
			<div>
				<div class="account-name">姓名：</div>
			</div>
			<div >item.name</div>
		</li>
	</ul>
</div>
</draggable>
<draggable  v-model="resultList" @end="dragged">
<div v-for="item in resultList" v-if='item.group_flag==2' :title="item.id">
	<ul>
		<li>
			<div>
				<div class="account-name">姓名：</div>
			</div>
			<div >item.name</div>
		</li>
	</ul>
</div>
</draggable>
<script>
import draggable from 'vuedraggable'
export default 
        components: 
            draggable,
        ,
        data() 
            return 
            	resultList:[id:'1',name:'aa',group_flag:'1',id:'2',name:'bb',group_flag:'2',id:'3',name:'cc',group_flag:'1'id:'4',name:'dd',group_flag:'2',id:'5',name:'ee',group_flag:'2'id:'6',name:'ff',group_flag:'1',id:'7',name:'gg',group_flag:'1']
            
        ,
        created() 
            this.refresh()
        ,
        methods: 
            dragged(evt) 
                console.log("拖动的本身:"+JSON.stringify(evt.item._underlying_vm_));
                if(evt.oldIndex == evt.newIndex) 
                    console.log("位置未动...");
                    return;
                
                var person_id_str = "";
                var currentResultList = evt.to.children;
                var currentGroupFlag = evt.item._underlying_vm_.group_flag;
                for(var i=0;i<currentResultList.length;i++)
                    person_id_str += currentResultList[i].title + ",";
                
                person_id_str = person_id_str.substring(0,person_id_str.length-1);
                console.log(person_id_str);
                //将person_id_str和currentGroupFlag传给后台修改数据库顺序
            ,
        
    
</script>