Jak zaimplementować przeciąganie i upuszczanie w Angular2?

Question

Chciałbym zaimplementować przeciągnij i upuść korzystając kątowa 2. Mam kilka rzeczy:

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

które chciałbym móc przeciągnij i upuść w pojemniku:

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

I nie mogę znaleźć żadnego dobrego źródła informacji na ten temat w Angular 2. Znalazłem ten plik: https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts, którego próbowałem, ale nie mogłem go uruchomić, nie jestem też całkowicie pewien, jak powinien on działać.

Jak mogę to wdrożyć?

Answer 1

Zrobiłem go za pomocą jQuery Draggable - zintegrowany kątowy

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'}); 
    } 
} 

Więcej informacji tutaj: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

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

Answer 2

polecam korzystania Ng2-Dragula.

Jest to zależność angular2, która zapewnia łatwą funkcję przeciągania i upuszczania do aplikacji.

Wszystko, co musisz zrobić, to zainstalować tę zależność przez npm.

npm install ng2-dragula dragula --save 

dodatek zawiera wewnątrz index.html i układ skonfigurować jako

<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> 

importu go wewnątrz elementu, w którym chcesz używać drag n drop i jesteś dobry, aby przejść.

@Component({ 
    selector: 'sample', 
    directives: [Dragula], 
    viewProviders: [DragulaService], 
    template:` 
    <div> 
    <div class='wrapper'> 
     <div class='container' [dragula]='"first-bag"'> 
     <div>You can move these elements between these two containers</div> 
     <div>Moving them anywhere else isn't quite possible</div> 
     <div>There's also the possibility of moving elements around in the same container, changing their position</div> 
     </div> 
     <div class='container' [dragula]='"first-bag"'> 
     <div>This is the default use case. You only need to specify the containers you want to use</div> 
     <div>More interactive use cases lie ahead</div> 
     <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div> 
     </div> 
    </div> 
    </div> 
    ` 
}) 
class Sample {} 

Answer 3

Rozpocząłem również od tego samego przykładu dla moich draggables - i dostałem to do pracy. Przykład pochodzi z wczesnej wersji angular2, więc niektóre zmiany są konieczne. Sprawdź this answer. Zawiera niektóre z tych zmian. Powodzenia!

własną wersję nieco bardziej ogólnego przeznaczenia idzie tak:

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)); 
    } 
} 

Weź to ze szczyptą soli, jak jestem obecnie ściga przeciek pamięci, który wydaje się być związane z tą dyrektywą. Zaktualizuję, jeśli znajdę problem.

Answer 4

Spróbuj tego:

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 
    }` 

następnie zaimportować

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

I @Component

directives: [Dragula], viewProviders: [DragulaService] 

Answer 5

spróbować tego:

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>