2019-01-09:鱼猫的个人博客上线啦！鱼猫的个人博客 欢迎点击查看哟！
2019-01-11:重新写了个demo，跟这个demo用法有点不同，拖动时图片放大的问题也解决了，需要的可以看看这里ionic3使用ng2-dragula拖拽功能
前段时间，无意中发现一个挺有趣的插件，可以实现拖拽换位，于是弄了个小demo，有兴趣的朋友可以看一看。
这个是看到的原例子文章How to Build Ionic 2 Drag and Drop using Dragula - Devdactic，然后我在他的例子上稍微改了一点，先看看效果
我已经把demo放在git上面了，有兴趣的可以下载看看使用ng2-dragula实现拖拽
创建一个新项目
我们首先先创建一个项目，这创建的过程就不用我多说了。然后安装ng2-dragula插件，还有为了能够看到效果，我们需要添加一些样式，直接从Dragula中获取样式（注：获取样式这一步很重要，不然看不到拖放效果），所以我们要再添加一个css-animator包。
npm install ng2-dragula dragula --save
npm install css-animator animate.css --save
执行完上面两句命令之后，我们需要将dragula导入到我们的模块中，因为页面使用了懒加载，所以我们在要用到这个插件的页面的module文件中添加。比如我这边的代码是这样的
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { DragulaService,DragulaModule } from 'ng2-dragula/ng2-dragula';
@NgModule({
declarations: [ HomePage, ],
imports: [ IonicPageModule.forChild(HomePage), DragulaModule ],
providers:[ DragulaService ]
})
export class HomePageModule {}
创建自定义的复制配置
其实意思就是配置拖放时用到的css样式
首先在项目根目录下的package.json文件中添加下面的代码
"config": { "ionic_copy": "./config/copy.config.js" }
接着创建这个copy.config.js文件，在项目根目录下新建一个名为config的文件夹，然后在config文件夹下新建copy.config.js文件，并将下面的代码复制到copy.config.js文件中
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
dest: '{{BUILD}}'
},
copyAnimateCss: {
src: './node_modules/animate.css/animate.css',
dest: '{{BUILD}}'
}
}
最后，在index.html中添加下面代码
<link rel="stylesheet" href="build/animate.css">
这样css的配置就完成了。
收尾工作
比较重要的步骤就是上面这一些，剩下的就是关于页面布局了。这里的代码我就不说了，demo里面都有，一些注释也写进去了。因为只是随手弄的一个小demo，并没有过度去深究，只是配置了最基础的。大家也可以去原例子那里看看，地址上面已经贴出来了。
网友评论