<template>
??<div>
????<a-table
??????v-if="createTable"
??????:columns="columns"
??????:data-source="data"
??????:pagination="false"
????>
??????<div
????????slot="action"
????????slot-scope="text"
????????class="move"
??????>移動(dòng)</div>
??????<p
????????slot="expandedRowRender"
????????slot-scope="record"
????????style="margin:?0"
??????>
????????{{?record.description?}}
??????</p>
????</a-table>
??</div>
</template>
<script>
export?default?{
??data()?{
????return?{
??????createTable:true,
??????data:?[
????????{
??????????key:?1,
??????????name:?"a",
??????????age:?32,
??????????address:?"New?York?No.?1?Lake?Park",
??????????draggable:true,
??????????description:
????????????"a----My?name?is?John?Brown,?I?am?32?years?old,?living?in?New?York?No.?1?Lake?Park.",
????????},
????????{
??????????key:?2,
??????????name:?"b",
??????????age:?42,
??????????address:?"London?No.?1?Lake?Park",??
??????????draggable:true,
??????????description:
????????????"b----My?name?is?Jim?Green,?I?am?42?years?old,?living?in?London?No.?1?Lake?Park.",
????????},
????????{
??????????key:?3,
??????????name:?"c",
??????????age:?32,
??????????address:?"Sidney?No.?1?Lake?Park",
????????????draggable:true,
??????????description:
????????????"c----My?name?is?Joe?Black,?I?am?32?years?old,?living?in?Sidney?No.?1?Lake?Park.",
????????},
??????],
??????columns:?[
????????{?title:?"Name",?dataIndex:?"name",?key:?"name"?},
????????{?title:?"Age",?dataIndex:?"age",?key:?"age"?},
????????{?title:?"Address",?dataIndex:?"address",?key:?"address"?},
????????{
??????????title:?"Action",
??????????dataIndex:?"",
??????????key:?"x",
??????????scopedSlots:?{?customRender:?"action"?},
????????},
??????],
????};
??},
??mounted()?{
????this.rowDrop();
??},
??methods:?{
????//行拖拽
????rowDrop()?{
??????const?rows?=?document.querySelectorAll(".ant-table-body?.ant-table-row");
??????let?orignIndex;
??????rows.forEach((e,i)=>{
????????let?index?=?i;
????????let?item?=?this.data[i];
????????e.draggable="true";
????????e.ondragstart=(event)=>{
???????????console.log("event",event);
???????????return?false
????????}
????????let?moveE?=?e.querySelector(".move");
????????moveE.onmouseover=(event)=>{
??????????item.draggable?=?true;
????????}
????????moveE.onmouseout=(event)=>{
??????????item.draggable?=?false;
????????}
????????e.ondragover?=?function(e){
??????????e.preventDefault();
????????}
????????e.ondragstart=(event)=>{
??????????if(item.draggable){
????????????orignIndex?=?index;
??????????}
??????????return?item.draggable;
????????}
????????e.ondrop=(event)=>{
??????????let?path??=?event.path;
??????????let?rowE?=?null;
??????????for(let?i=0;i<path.length;i++){
????????????let?p?=?path[i];
????????????console.log('p.tagName',p.tagName);
????????????if(p.tagName==="TR"){
??????????????rowE?=?p;
??????????????break;
????????????}
??????????}
??????????let?endIndex?=?Array.prototype.indexOf.call(rows,rowE);
??????????console.log('endIndex',endIndex,orignIndex,rowE);
??????????this.data[orignIndex]?=?this.data.splice(endIndex,?1,?this.data[orignIndex])[0];
??????????this.$nextTick(()=>{
????????????this.rowDrop();
??????????});
????????}
??????})
????}
??},
};
</script>
<style?scoped>
.move{
??color:?#5555ff;
}
</style>
