Come implementare il trascinamento della selezione in Angular2?

Question

Vorrei realizzare un drag and drop utilizzando angolare 2. Ho alcuni elementi:

<div class="item"></div> 

che mi piacerebbe essere in grado di trascinare e rilasciare in un contenitore:

<div class="container"></div> 

I non riesco a trovare alcuna buona fonte di informazioni per farlo in Angular 2. Ho trovato questo file: https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts che ho provato ma non riuscivo a farlo funzionare, non sono nemmeno del tutto sicuro su come dovrebbe funzionare.

Come implementarlo?

Answer 1

ho fatto utilizzando jQuery trascinabile - integrato in angolare

import {Component, ElementRef, OnInit} from '@angular/core';' 

declare var jQuery:any; 

@Component({ 
    selector: 'jquery-integration', 
    templateUrl: './components/jquery-integration/jquery-integration.html' 
}) 
export class JqueryIntegration implements OnInit { 
    elementRef: ElementRef; 
    constructor(elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 
    ngOnInit() { 
     jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'}); 
    } 
} 

Maggiori informazioni qui: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Demo online: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

Answer 2

mi consiglia di utilizzare Ng2-Dragula.

è la dipendenza angular2 che fornisce funzionalità di drag n drop all'applicazione facilmente.

Tutto ciò che devi fare è installare questa dipendenza tramite npm.

npm install ng2-dragula dragula --save 

aggiuntivo include all'interno index.html e configurare il sistema come

<script src="/node_modules/ng2-dragula/bundles/ng2-dragula.js"></script> 
<link href="/node_modules/ng2-dragula/src/public/css/dragula.min.css" rel='stylesheet' type='text/css'> 
<script> 
    System.config({   
    paths:{ 
     'dragula'   : '../node_modules/dragula/dist/dragula.min.js' 
    }, 
    packages: {    
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     } 
    } 
    }); 

System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 

importazione all'interno del componente di cui si desidera utilizzare il drag n drop e siete a posto.

Answer 3

Ho anche iniziato con lo stesso esempio per i miei dispositivi mobili e l'ho fatto funzionare. L'esempio è tratto da una versione precedente di angular2, quindi sono necessarie alcune modifiche. Controlla this answer. Ha alcuni di quei cambiamenti in esso. Buona fortuna!

mia versione scopo un po 'più generale va in questo modo:

import {Directive, EventEmitter, HostListener, Output} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 

@Directive({ 
    selector: '[draggable]' 
}) 
export class DraggableDirective { 

    @Output() mousedrag: Observable<{x: number, y: number}>; 
    @Output() dragend = new EventEmitter<void>(); 
    mousedown = new EventEmitter<MouseEvent>(); 
    mousemove = new EventEmitter<MouseEvent>(); 
    dragActive = false; 

    @HostListener('document:mouseup', ['$event']) 
    onMouseup(event) { 
    if(this.dragActive) { 
     this.dragend.emit(null); 
     this.dragActive = false; 
    } 
    } 

    @HostListener('mousedown', ['$event']) 
    onMousedown(event: MouseEvent) { 
    this.mousedown.emit(event); 
    } 

    @HostListener('document:mousemove', ['$event']) 
    onMousemove(event: MouseEvent) { 
    if(this.dragActive) { 
     this.mousemove.emit(event); 
     return false; 
    } 
    } 

    constructor() { 
    this.mousedrag = this.mousedown.map((event) => { 
     this.dragActive = true; 
     return { x: event.clientX, y: event.clientY }; 
    }).flatMap(mouseDownPos => this.mousemove.map(pos => { 
     return { x: pos.clientX - mouseDownPos.x, y: pos.clientY - mouseDownPos.y }; 
    }).takeUntil(this.dragend)); 
    } 
} 

Prendere che con un pizzico di sale, come attualmente sto inseguendo una perdita di memoria che sembra essere correlato a questa direttiva. Aggiornerò se trovo un problema.

Answer 4

Prova questo:

systemjs.config: 

var map =  { 
    'app': './wwwroot/ngApp', 
    'rxjs': './wwwroot/js/libs/rxjs', 
    '@angular': './wwwroot/js/libs/@angular', 
    'dragula': './wwwroot/js/libs/dragula/dist/dragula.js', 
    'ng2-dragula': './wwwroot/js/libs/ng2-dragula' 
    }; 

var packages = { 
    'app': { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' }, 
    'dragula': { defaultExtension: 'js' }, 
    'ng2-dragula': {defaultExtension: 'js' } 
    }; 

var config = { 
    map: map, 
    packages: packages 
    }` 

Poi importare

import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula'; 

E in @Component

directives: [Dragula], viewProviders: [DragulaService] 

Answer 5

provare questo:

function onDragStart(event, data) { 
    event.dataTransfer.setData('data', data); 
} 
function onDrop(event, data) { 
    let dataTransfer = event.dataTransfer.getData('data'); 
    event.preventDefault(); 
} 
function allowDrop(event) { 
    event.preventDefault(); 
} 

<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div> 
<div draggable="true" (dragstart)="onDragStart($event, dragData)"></div>