Question

我试图为我的组件实现draggable指令，我注意到当我尝试将draggable属性设置为false时，我无法停止拖动组件。我可以在DOM中看到它被设置为false，但它似乎被忽略了，我可以拖动元素而不管draggable =“false”。

import { Directive, ElementRef, Renderer, OnDestroy, OnInit, Input } from '@angular/core';

@Directive({
    selector: '[dnddraggable]',
    host: {
        '(drag)': 'onDrag($event)'
    }
})

export class DraggableDirective implements OnDestroy, OnInit {
    @Input('draggableConfig') config: any; // config object
    @Input('canvas') canvasEl: ElementRef; // canvas that this element belongs to
    private draggedEl: ElementRef; // DOM element that is being dragged
    private draggableWidth; // width of dragged element
    private draggableHeight; // height of dragged element
    private boundaries: any = {}; // boundaries where element can be dragged
    private boundaryEl: ElementRef; // e.g. canvas

    constructor(
        private el: ElementRef, // reference to directives element
        private renderer: Renderer // renderer to set element style

    ) {

    }

    public ngOnInit(): void {
        // this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false');

        this.draggedEl = this.el.nativeElement;
        this.draggableWidth = this.draggedEl.clientWidth;
        this.draggableHeight = this.draggedEl.clientHeight;

        if (this.config.hasBoundaries) {
            this.boundaryEl = this.config.boundaryObject;
            this.calculateBoundaries();
        }

        this.disableDragging();
    }

    // change position of element when being dragged
    onDrag(event: MouseEvent) {
        event.preventDefault();
        // when dragged, change position according to mouse position, check boundaries if needed
        if (this.config.hasBoundaries) {
            if (this.isInBoundaries(event)) {
                this.changePosition(event);
            }
        } else {
            this.changePosition(event);
        }
    }

    enableDragging() {
        this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'true');
    }

    disableDragging() {
        this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'false');
    }

    // change left and top css style
    changePosition(event: MouseEvent) {
        this.renderer.setElementStyle(this.draggedEl, 'left', event.changedPointers[0].pageX -
            (this.draggableWidth / 2) - this.canvasEl.offsetLeft + 'px');
        this.renderer.setElementStyle(this.draggedEl, 'top', event.changedPointers[0].pageY -
            (this.draggableHeight / 2) - this.canvasEl.offsetTop + 'px');
    }

    // if draggable should be moved only inside certain boundaries, calculate them
    calculateBoundaries() {
        this.boundaries = {
            left : this.boundaryEl.firstChild.offsetLeft + (this.draggableWidth / 2),
            right : this.boundaryEl.firstChild.clientWidth + this.boundaryEl.firstChild.offsetLeft -
                (this.draggableWidth / 2),
            top : this.boundaryEl.firstChild.offsetTop + (this.draggableHeight / 2),
            bottom : this.boundaryEl.firstChild.clientHeight +
                this.boundaryEl.firstChild.offsetTop - (this.draggableHeight / 2),
        };
    }

    // check if dragged element is still inside boundaries
    isInBoundaries(event: MouseEvent) {
        return event.changedPointers[0].pageX > this.boundaries.left &&
            event.changedPointers[0].pageX < this.boundaries.right &&
            event.changedPointers[0].pageY > this.boundaries.top &&
            event.changedPointers[0].pageY < this.boundaries.bottom;
    }

    public ngOnDestroy(): void {
        this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'false');
    }
}

Answer 1

用户已经解决了她的问题，但是由于我遇到了同样的问题，并且找不到任何解决方案，因此我认为共享我的解决方案会很有用。

基本上，属性[draggable]已重命名为[mapDraggable]。因此，只需看看此更改是否可以解决您的问题

Angular2 draggable指令，draggable =“false”不起作用

1 个答案: