使用ng2-dragula实现拖放（更新）

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中添加下面代码

这样css的配置就完成了。

收尾工作

比较重要的步骤就是上面这一些，剩下的就是关于页面布局了。这里的代码我就不说了，demo里面都有，一些注释也写进去了。因为只是随手弄的一个小demo，并没有过度去深究，只是配置了最基础的。大家也可以去原例子那里看看，地址上面已经贴出来了。