一、拖拽：on-drag
** 在屏幕上按住并移动时，触发on-drag拖动事件：
** 根据运动方向的不同，可以细分为以下几种事件：
on-drag – 向所有方向拖动时都触发此事件on-drag-up – 向上拖动时触发此事件on-drag-down – 向下拖动时触发此事件on-drag-left – 向左拖动时触发此事件on-drag-right – 向右拖动时触发此事件 可以在任意元素上使用这些指令挂接对应的事件监听函数： 1.<any on-drap="...">...</any> 示例代码： <body ng-controller="ezCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">on-drag</h1> </ion-header-bar> <div class="scroll-content has-header padding"> <img src="img/baymax.png" on-touch="onTouch($event)" on-drag="onDrag($event);"> </div> </body> js:var ox,oy; $scope.onTouch = function($event){ ox = $event.target.offsetLeft; // 按下鼠标时，距窗口左边的距离 oy = $event.target.offsetTop; // 按下鼠标时，距窗口顶部的距离 }; $scope.onDrag = function($event){ //alert('已拖动') var el = $event.target, dx = $event.gesture.deltaX, // 拖动X轴的距离 dy = $event.gesture.deltaY; // 拖动Y轴的距离 el.style.left = ox + dx + "px"; // 物体的left的值 el.style.top = oy + dy + "px"; // 物体的top的值 }; **********
代码到这里就可以用鼠标拖动物体到处移动了
在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时， 会立即触发on-release事件。
可以在任何元素上挂接响应的事件监听函数：
<any on-touch=“…” on-release=“…”>…</any>示例代码：
<body ng-controller="ezCtrl"> <ion-header-bar class="bar-positive" ng-class="[style]" on-touch="style='bar-assertive'" on-release="style='bar-positive'"> <h1 class="title">on-touche/on-release</h1> </ion-header-bar> <ion-content> <img src="img/0021.png"> </ion-content> </body> js： angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope) { });在屏幕上快速敲击两次，将触发on-double-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
<any on-double-tap=“…”>…</any>示例代码：
<body ng-controller="ezCtrl"> <ion-header-bar class="bar-positive" on-double-tap="title='I am double tapped!'"> <h1 class="title">{{title}}</h1> </ion-header-bar> <ion-content> <p ng-include=" 'txt/xiyouji.txt' "></p> </ion-content> </body> js： angular.module("ezApp",["ionic"]) .controller("ezCtrl",function($scope) { $scope.title = "on-double-tap"; });在屏幕同一位置按住超过500ms，将触发on-hold事件：
你可以在任何元素上使用这个指令挂接监听函数：
<any on-hold=“…”>…</any>示例代码：
<body ng-controller="ezCtrl"> <ion-header-bar class="bar-positive" on-hold="show_delete();"> <h1 class="title">on-hold</h1> </ion-header-bar> <ion-content> <ion-list ng-repeat="item in items"> <ion-item> {{item}} <ion-delete-button class="ion-minus-circled"></ion-delete-button> <ion-reorder-button class="ion-navicon"></ion-reorder-button> </ion-item> </ion-list> </ion-content> <ion-footer-bar class="bar-positive"></ion-footer-bar> </body> js： angular.module("ezApp",["ionic"]) .controller("ezCtrl",function($scope, $ionicListDelegate) { $scope.items=["China","Japan","India","Russian"]; $scope.show_delete = function(){ $ionicListDelegate.showDelete(true); }; }); 脚本接口 : $ionicGesture 除了使用之前介绍的特定指令实现手势事件的监听，也可以使用$ionicGesture服务 注册/解除手势事件监听： on(eventType,callback,$element,options) – 注册手势事件监听函数 参数eventType是支持的事件类型，参看下面介绍；参数callback指定监听函数； 参数$element是要绑定事件的jqLite元素。 on()方法返回的是一个ionic.gesture对象，可供解除监听用。 off(gesture,eventType,callback) – 解除手势事件监听函数 参数gesture是on()方法返回的结果对象，参数callback是要移除的监听函数。 $ionicGesture服务支持的事件类型有： hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release 示例代码： <body ng-controller=”ezCtrl”> <ion-header-bar class=”bar-positive”> <h1 class=”title”>$ionicGesture</h1> </ion-header-bar> <ion-content class=”padding”> <button class=”button” id=”test”>test</button> </ion-content> </body> js： angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) { var el = document.querySelector(“#test”); $ionicGesture.on(“tap”,function(){ $ionicPopup.alert({ title : “提醒”, template : “这个监听是用$ionicGesture服务注册的！” }) },angular.element(el)); });
*************************************************
使用jquery实现拖拽
$("#info").mousemove = (function(ev){ var disX,disY; disX = ev.pageX - $(this).offsetLeft; disY = ev.pageY - $(this).offsetTop; $(document).mousemove(function(ev){ $("#info").css("left",ev.pageX - disX); $("#info").css("top",ev.pageY - disY); }); $(document).mouseup(function(){ $(this).off(); }); })
