Angular2 可拖动指令，draggable="false" 不起作用

Posted 2023-05-08

【中文标题】Angular2 可拖动指令，draggable="false" 不起作用

【英文标题】：Angular2 draggable directive, draggable="false" not working

【发布时间】：2017-04-10 03:25:09

【问题描述】：

我尝试为我的组件实现可拖动指令，我注意到当我尝试将可拖动属性设置为 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');
    

【问题讨论】：

嗨，你解决了吗？

你好，是的。如果我没记错的话，这是材料设计和一些 CSS 类关于元素可拖动性的错误，我在代码中使用了一些显式检查这个属性来启用/禁用拖动跨度>

【参考方案1】：

该用户已经解决了她的问题，但是由于我遇到了同样的问题并且我在任何地方都没有找到解决方案，所以我认为如果我分享我的解决方案会很有用。

基本上，属性[draggable] 已重命名为[mapDraggable]。所以看看这个改变是否能解决你的问题