手机网站 源码,北京网站建设116net,全国网站设计公司,百度小程序开发者工具包安装方式
yarn add vuedraggablenext
npm i -S vuedraggablenext属性说明
如果下面的属性说明未能完全看明#xff0c;可以看左边的对应的菜单查看详细说明和例子。
完整例子
templatediv classitxstdivdraggable:lists…包安装方式
yarn add vuedraggablenext
npm i -S vuedraggablenext属性说明
如果下面的属性说明未能完全看明可以看左边的对应的菜单查看详细说明和例子。
完整例子
templatediv classitxstdivdraggable:liststate.listghost-classghostchosen-classchosenClassanimation300startonStartendonEndtemplate #item{ element }div classitem{{ element.name }}/div/template/draggable/divdiv{{ state.list }}/div/div
/template
script setup
import { ref, reactive } from vue;
import draggable from vuedraggable;
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:liststate.list //需要绑定的数组
ghost-classghost //被替换元素的样式
chosen-classchosenClass //选中元素的样式
animation300 //动画效果
startonStart //拖拽开始的事件
endonEnd //拖拽结束的事件
*/
const state reactive({//需要拖拽的数据拖拽后数据的顺序也会变化list: [{ name: www.itxst.com, id: 0 },{ name: www.baidu.com, id: 1 },{ name: www.google.com, id: 2 },],
});//拖拽开始的事件
const onStart () {console.log(开始拖拽);
};//拖拽结束的事件
const onEnd () {console.log(结束拖拽);
};
/script
style scoped
.itxst {width: 600px;display: flex;
}
.itxst div:nth-of-type(1) {flex: 1;
}
.itxst div:nth-of-type(2) {width: 270px;padding-left: 20px;
}
.item {border: solid 1px #eee;padding: 6px 10px;text-align: left;
}.item:hover {cursor: move;
}
.item .item {margin-top: 10px;
}
.ghost {border: solid 1px rgb(19, 41, 239);
}
.chosenClass {background-color: #f1f1f1;
}
/style如果报 missing required prop “itemKey” draggable加上属性 item-keyid文档:vue.draggable.next 中文文档 参考文档vue3中使用vuedraggable
