2019-01-09:魚(yú)貓的個(gè)人博客上線啦取募！魚(yú)貓的個(gè)人博客?歡迎點(diǎn)擊查看喲正林！
2019-01-11:重新寫了個(gè)demo赡模，跟這個(gè)demo用法有點(diǎn)不同婿着，拖動(dòng)時(shí)圖片放大的問(wèn)題也解決了罢猪，需要的可以看看這里ionic3使用ng2-dragula拖拽功能
前段時(shí)間近她，無(wú)意中發(fā)現(xiàn)一個(gè)挺有趣的插件，可以實(shí)現(xiàn)拖拽換位膳帕，于是弄了個(gè)小demo粘捎，有興趣的朋友可以看一看。
這個(gè)是看到的原例子文章How to Build Ionic 2 Drag and Drop using Dragula - Devdactic危彩，然后我在他的例子上稍微改了一點(diǎn)攒磨，先看看效果
我已經(jīng)把demo放在git上面了，有興趣的可以下載看看使用ng2-dragula實(shí)現(xiàn)拖拽
創(chuàng)建一個(gè)新項(xiàng)目
我們首先先創(chuàng)建一個(gè)項(xiàng)目汤徽，這創(chuàng)建的過(guò)程就不用我多說(shuō)了娩缰。然后安裝ng2-dragula插件，還有為了能夠看到效果谒府，我們需要添加一些樣式拼坎，直接從Dragula中獲取樣式（注：獲取樣式這一步很重要浮毯，不然看不到拖放效果），所以我們要再添加一個(gè)css-animator包泰鸡。
npm install ng2-dragula dragula --save? ? ??
npm install css-animator animate.css --save
執(zhí)行完上面兩句命令之后债蓝，我們需要將dragula導(dǎo)入到我們的模塊中，因?yàn)轫?yè)面使用了懶加載盛龄，所以我們?cè)谝玫竭@個(gè)插件的頁(yè)面的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 {}
創(chuàng)建自定義的復(fù)制配置
????其實(shí)意思就是配置拖放時(shí)用到的css樣式
首先在項(xiàng)目根目錄下的package.json文件中添加下面的代碼
"config": { "ionic_copy": "./config/copy.config.js" }
接著創(chuàng)建這個(gè)copy.config.js文件，在項(xiàng)目根目錄下新建一個(gè)名為config的文件夾余舶，然后在config文件夾下新建copy.config.js文件啊鸭，并將下面的代碼復(fù)制到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的配置就完成了欧芽。
收尾工作
比較重要的步驟就是上面這一些莉掂，剩下的就是關(guān)于頁(yè)面布局了葛圃。這里的代碼我就不說(shuō)了千扔，demo里面都有，一些注釋也寫進(jìn)去了库正。因?yàn)橹皇请S手弄的一個(gè)小demo曲楚，并沒(méi)有過(guò)度去深究，只是配置了最基礎(chǔ)的褥符。大家也可以去原例子那里看看龙誊，地址上面已經(jīng)貼出來(lái)了。
