出名的网站制作正规公司,开发公司成本费用比例,二手域名,phpcms 关闭网站简述
作为一名前端开发人员#xff0c;在工作中难免会遇到拖拽功能#xff0c;分享一个github上一个不错的拖拽js库#xff0c;能满足我们在项目开发中的需要#xff0c;支持Vue和React#xff0c;下面是SortableJS的使用详细#xff1b; 这个是sortableJS中文官方文档在工作中难免会遇到拖拽功能分享一个github上一个不错的拖拽js库能满足我们在项目开发中的需要支持Vue和React下面是SortableJS的使用详细 这个是sortableJS中文官方文档记录了一些相关属性和使用方法页面十分简约方便阅读
SortableJs中文文档http://www.sortablejs.com
下面是使用详细主要分为3步;
1、首相需要安装相关依赖npm install sortablejs --save
2、页面引入使用import Sortable from sortablejs;
3、获取大盒子属性然后在初始化的使用需要调用Sortable.create()方法 vue页面使用
templatediv classsortablediv idcontainer refsortableBoxdiv v-for(item, index) in arr :keyitemspan{{ item }}/span/div/div/div
/templatescript
import Sortable from sortablejs;
export default {name: CodeDemoSortable,data() {return {arr: [one, two, three, four],};},mounted() {this.defineSortable();},methods: {defineSortable() {this.$nextTick(() {const el this.$refs.sortableBox;// 或则使用// const el document.getElementById(container);Sortable.create(el, {animation: 200,//拖拽动画过渡时间group: name,sort: true,});});},},
};
/scriptstyle langscss scoped
.sortable {#container {width: 600px;height: 300px;margin: 50px auto;background-color: skyblue;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around;div {height: 20%;text-align: center;line-height: 50px;width: 100%;background-color: plum;}}
}
/style html页面使用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {width: 600px;height: 300px;margin: 50px auto;background-color: skyblue;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around;}.containerdiv {height: 20%;text-align: center;line-height: 52px;width: 100%;background-color: plum;}/style
/headbodydiv classcontainerdivone/divdivtwo/divdivthree/div/div!-- 引入js文件也可以把js文件下载到本地使用 --script srchttps://cdn.bootcdn.net/ajax/libs/Sortable/1.15.0/Sortable.min.js/scriptscriptconst el document.querySelector(.container)// 初始化var sortable Sortable.create(el, {animation: 200,//拖拽动画过渡时间group: name,sort: true});/script
/body/html 效果图如下 感觉有用就一键三连感谢(●◡●)
