如何实现Ionic的拖放指令?

时间:2017-10-18 13:15:12

标签: javascript angular typescript ionic-framework

//长press.directive.d.ts

import { ElementRef, EventEmitter, OnDestroy, OnInit, NgZone } from '@angular/core';
import { Gesture } from 'ionic-angular/gestures/gesture';
export declare class LongPressDirective implements OnInit, OnDestroy {
    zone: NgZone;
    interval: number;
    onPressStart: EventEmitter<any>;
    onPressing: EventEmitter<any>;
    onPressEnd: EventEmitter<any>;

    el: HTMLElement;
    pressGesture: Gesture;
    int: any;
    constructor(zone: NgZone, el: ElementRef);
    ngOnInit(): void;
    ngOnDestroy(): void;
}

//长press.drective.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var gesture_1 = require("ionic-angular/gestures/gesture");
var LongPressDirective = (function () {
    function LongPressDirective(zone, el) {
        this.zone = zone;
        this.onPressStart = new core_1.EventEmitter();
        this.onPressing = new core_1.EventEmitter();
        this.onPressEnd = new core_1.EventEmitter();
        this.el = el.nativeElement;
    }
    LongPressDirective.prototype.ngOnInit = function () {
        var _this = this;
        if (!this.interval)
            this.interval = 500;
        if (this.interval < 40) {
            throw new Error('A limit of 40ms is imposed so you don\'t destroy device performance. If you need less than a 40ms interval, please file an issue explaining your use case.');
        }
        this.pressGesture = new gesture_1.Gesture(this.el);
        this.pressGesture.listen();
        this.pressGesture.on('press', function (e) {
            _this.onPressStart.emit(e);
            _this.zone.run(function () {
                _this.int = setInterval(function () {
                    _this.onPressing.emit();
                }, _this.interval);
            });
        });

        this.pressGesture.on('pressup', function (e) {
            _this.zone.run(function () {
                clearInterval(_this.int);
            });
            _this.onPressEnd.emit();
        });




    };
    LongPressDirective.prototype.ngOnDestroy = function () {
        var _this = this;
        this.zone.run(function () {
            clearInterval(_this.int);
        });
        this.onPressEnd.emit();
        this.pressGesture.destroy();
    };
    return LongPressDirective;
}());
LongPressDirective.decorators = [
    { type: core_1.Directive, args: [{
                selector: '[ion-long-press]'
            },] },
];
/** @nocollapse */
LongPressDirective.ctorParameters = function () { return [
    { type: core_1.NgZone, },
    { type: core_1.ElementRef, },
]; };
LongPressDirective.propDecorators = {
    'interval': [{ type: core_1.Input },],
    'onPressStart': [{ type: core_1.Output },],
    'onPressing': [{ type: core_1.Output },],
    'onPressEnd': [{ type: core_1.Output },],
};
exports.LongPressDirective = LongPressDirective;
//# sourceMappingURL=long-press.directive.js.map

这是“按下”,“按下”事件的实施。 该指令旨在建立在离子用于长时间按压的现有Hammer.JS按压事件的基础上,通过给你间隔发射。 https://www.npmjs.com/package/ionic-long-press  我想添加'drag' - 'drop'事件。 我是棱角分明的初学者。 需要专家的帮助。 感谢。

1 个答案:

答案 0 :(得分:0)

我使用这个插件解决了这个问题。 https://github.com/AbineshSrishti/ionic2-selection-card-drag