Question

任何人都可以告诉我有没有很好的参考资料来学习Angular2的拖放？

Answer 1

我不知道任何参考资料。但是如果你的拖放式解决方案是基于HTML5的，也许你可以利用'@ angular / core'中的HostListener装饰器来破解你的拖放交换逻辑：

HostListeners为您提供了为onmousedown，onkeyup，ondrop，ondragstart等元素事件实现传统侦听器的方法。

您可以在放置区域组件上添加类似的内容：

@HostListener('drop', ['$event']) 
onDrop(event: any) {
    //do something             
}

你可以在你的可拖动组件上添加这样的东西：

@HostListener('dragstart', ['$event']) 
onDrag(event: any) {
    //do something
}

其余的是考虑一些逻辑来识别被拖放的内容并更改拖动区域组件模型。

这是我在W'Schools关于drag'n'drop（http://www.w3schools.com/html/html5_draganddrop.asp）主题的启发下制作的一些功能代码：

import { Component, HostListener, Input } from '@angular/core';

// The draggable component
@Component({
    selector: 'dragme',
    template: `
        <div draggable="true">
            Drag {{name}}!
        </div>
    `,
    styles: [`
        [draggable] {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -khtml-user-drag: element;
            -webkit-user-drag: element;
            background-color: #AAA; 
            border: 1px solid black; 
            padding: 24px;
            margin: 12px;
        }
    `]
})
export class DragMe {

    @Input()
    name:string = "";

    @HostListener('dragstart', ['$event'])
    onDrag(event:any){        
        event.dataTransfer.setData("name",this.name);
    }
}

// The drop area component
@Component({
    selector: 'drop',
    template: `
        <div class="drop">
            Drop over me!
            <ul>
                <li *ngFor="let i of items">{{i}}</li>
            </ul>
        </div>
    `,
    styles: [`
        .drop{
            border: 1px solid black;
            padding: 24px;
        }
    `]
})
export class DropOverMe {

    items:string[] = [];

    @HostListener('dragover', ['$event'])
    onDragover(event:any){
        event.preventDefault();
    }

    @HostListener('drop', ['$event'])
    onDrop(event:any){
        event.preventDefault();        
        var name = event.dataTransfer.getData("name");                        
        this.items.push(name);
    }
}

// The functional example
@Component({
    selector: "drag-example",
    template: `
        <dragme name="Bob"></dragme>
        <dragme name="Alice"></dragme>
        <dragme name="Carl"></dragme>

        <drop></drop>
    `

})
export class DragExample{

}

完整代码：https://github.com/rafaelodon/angular2-html5-dragndrop-example

Answer 2

angular2-grid插件为angular2提供了基于网格的指令。也许它对你的情况有帮助！

This是github回购，你可以找到一个有效的例子there

学习Angular2拖放的参考资料？

2 个答案: