python vuedraggable_卡片拖拽（vue拖拽事件）

工作看板

我的看板

{{listItem.listName}}

{{element.name}} {{index}}

test1

添加卡片...

添加X

import draggable from 'vuedraggable'

import Sortable from 'vue-sortable'

export default {

name: "app",

data(){

return{

itemAddShow:true,

itemValue:'',

dataList:[

{list:[{name:"John", id:1},

{name:"Joao", id:2},

{name:"Jean", id:3},

{name:"Gerard", id:4} ],

listName:'待办事项',

listAdd:true},

{list:[{name:"Juan", id:5},

{name:"Edgard", id:6},

{name:"Johnson", id:7} ],

listName:'延期事项',

listAdd:true},

{list:[{name:"tom", id:8},

{name:"mike", id:9},

{name:"lucy", id:10} ],

listName:'正常推进事项',

listAdd:true},

{list:[{name:"tomchen", id:8},

{name:"mikechen", id:9},

{name:"lucychen", id:10} ],

listName:'已完结事项',

listAdd:true}

]

}

},

components:{

'draggable':draggable

},

methods:{

editListName(){

},

addNewCardShow(listItem){

listItem.listAdd=false;

},

addNewCard(listItem){

if(this.itemValue==''){

return false;

}

let itemV=this.itemValue;

let tempTime=new Date().getTime();

let itemValue={name:itemV, id:tempTime};

console.log(itemValue);

listItem.list.push(itemValue);

this.itemValue='';

},

closeAddItem(listItem){

listItem.listAdd=true;

},

log: function (evt){

console.log(evt)

}

},

mounted(){

}

}

.addNewCardShow{

height: 24px;

line-height: 24px;

}

.cardList{

border:1px solid #ccc;

padding: 0 4px;

/*margin-right: 10px;*/

background: #eceaea;

border-radius: 6px;

}

.cardList>h3{

background: #eceaea;

margin: 0;

height: 36px;

line-height: 36px;

padding: 0 8px;

}

body{

font-family:'微软雅黑'

}

[v-cloak]{

display:none;

}

#example{

/*width:1000px;*/

margin:0 auto;

}

.list-complete-item {

transition: all 1s;

/*height:50px;*/

line-height: 50px;

background: #ccc;

color:#fff;

text-align: center;

font-size:24px;

margin-top:10px;

border-right: 1px solid #ccc;

}

.styleclass{

width:100px;

float:left;

}

.list-complete-enter, .list-complete-leave-active {

opacity: 0;

height: 0px;

margin-top: 0px;

padding: 0px;

border: solid 0px;

}

.list-complete-sortable-chosen,.list-complete-sortable-ghost{

opacity: 0;

height: 0px;

margin-top: 0px;

padding: 0px;

border: solid 0px;

}

.dargDiv{

cursor:move;

background:#78BC27;

}

.wrods{

margin-top:50px;

}

p{

line-height:24px;

}

.lineData{

background:white;

cursor: move;

padding: 4px 8px;

border: 1px solid #ccc;

}