ionic2拖拽元素

先看效果图

1、这里用到了jq 所以第一步我们在index 中引入两个必须的jq

1 2	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2、第二步我们需要在typings.d.ts中声明 $ 和 jQuery 这样才能在ts中使用这个方法

1 2	declare var $: any; declare var jQuery: any;

3、接着我们需要引入 touchPunch.ts 这个文件这是jq的触摸插件 jq封装好的可以直接用，下载之后放到某个文件夹下
下载地址：https://gitee.com/bestjarvan/public/blob/master/mini-program-components/drag/touchPunch.ts

4、放好后我们引入app.module.ts 中在providers中声明

1
2
3

providers:[
    TouchPunchProvider
]

5、在html元素中给需要拖拽的元素一个id 之后在ts中初始化一下我们的jq插件就可以了

// 参考
// html
<ion-fab style="width: 5rem;height: 5rem;" middle right #barrage id="barrage">
  <div ion-fab style="display: none"></div>
  <img src="./assets/images/picdetail_service.png">
</ion-fab>

//ts
constructor(public touchIt:TouchPunchProvider){}

ionViewDidLoad() {
  this.touchIt.init();
  $('#barrage').draggable();
}

完结