如何在Angular2中实现拖放？

Question

我想使用Angular 2实现拖放。我有一些项目：

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

我希望能够在容器中拖放：

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

我在Angular 2中找不到任何好的信息来源。我找到了这个文件：https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts我试过但我无法让它工作，我也不完全确定它是怎么回事应该管用。

如何实施？

Answer 1

试试这个：

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>

Answer 2

试试这个：

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

然后导入

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

在@Component

中

directives: [Dragula], viewProviders: [DragulaService]

Answer 3

我建议使用Ng2-Dragula。

它是angular2依赖项，可以轻松地为您的应用程序提供拖放功能。

您需要做的就是通过npm安装此依赖项。

npm install ng2-dragula dragula --save

在index.html中添加include并将系统配置为

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

将其导入您想要使用拖放的组件内，您可以继续使用。

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

我也开始使用与我的draggables相同的例子 - 并确实让它工作。该示例来自angular2的早期版本，因此需要进行一些更改。查看this answer。它有一些变化。祝你好运！

我自己稍微更通用的版本是这样的：

ID

因为我正在追逐一个似乎与此指令相关的内存泄漏，所以需要一点点盐。如果我发现问题，我会更新。

Answer 5

我使用jquery draggable完成了它 - 集成在Angular中

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

更多信息： http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

现场演示： http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

Answer 6

俄语的答案效果很好，但更改检测使其变慢。您可以使用自定义指令来解决此问题。

这笔款项来自https://netbasal.com/angular-2-escape-from-change-detection-317b3b44906b

<div (drop)="onDrop($event, dropData)" appIgnoreEvent (emitter)="allowDrop($event)"></div>

然后将dragOver事件传递给您的发射器。

{{1}}

我的声誉不足，无法将其添加为评论

Answer 7

我为我的一个项目制作了此组件，希望对您有所帮助。

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

@Component({
    selector: 'app-video-call-container',
    templateUrl: './video-call-container.component.html',
    styleUrls: ['./video-call-container.component.css']
})
export class VideoCallContainerComponent implements OnInit {

    constructor() { }

    mouseCursorX = 0;
    mouseCursorY = 0;
    dragActive = false;



    @ViewChild('container') container: ElementRef;

    @HostListener('window:mouseup', ['$event'])
    mouseUp(event) {
        if (this.dragActive == true) {
            this.dragActive = false;
        }
    }

    @HostListener('window:mousemove', ['$event'])
    mouseMove(event) {
        if (this.dragActive) {
            var left = this.mouseCursorX - event.clientX;
            var top = this.mouseCursorY - event.clientY;
            var offsets = this.getElementOffsets(this.container.nativeElement);
            var posLeft = (offsets.left - left);
            var posTop = (offsets.top - top);
            if (posLeft > 0 && posLeft <= window.innerWidth - this.container.nativeElement.offsetWidth && posTop > 0 && posTop <= window.innerHeight - this.container.nativeElement.offsetHeight) {
                this.container.nativeElement.style.left = posLeft + "px";
                this.container.nativeElement.style.top = posTop + "px";
            }
            this.mouseCursorX = event.clientX;
            this.mouseCursorY = event.clientY;
        }
    }

    drag(event) {
        this.dragActive = true;
        this.mouseCursorX = event.clientX;
        this.mouseCursorY = event.clientY;
    }


    getElementOffsets(elem) {
        return {
            top: this.getOffsetTop(elem),
            left: this.getOffsetLeft(elem)
        }
    }

    getOffsetTop(elem) {
        var offsetTop = 0;
        do {
            if (!isNaN(elem.offsetTop)) {
                offsetTop += elem.offsetTop;
            }
        } while (elem = elem.offsetParent);
        return offsetTop;
    }

    getOffsetLeft(elem) {
        var offsetLeft = 0;
        do {
            if (!isNaN(elem.offsetLeft)) {
                offsetLeft += elem.offsetLeft;
            }
        } while (elem = elem.offsetParent);
        return offsetLeft;
    }


    ngOnInit(): void {
    }

}

<div class="container-box" #container>
    <div class="container-header" (mousedown)="drag($event)">
        <label>Vikas Kandari</label>
        <span>Ringing...</span>
        <button><i class="fa fa-close"></i></button>
    </div>
    <div class="container-body">
        <div class="video-call-caller">
            <video></video>
        </div>
        <div class="video-call-receiver">
            <video></video>
        </div>
    </div>
</div>

.container-box {
    position: fixed;
    background-color: #fefefe;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.2);
    z-index: 9999999999999;
    right: 15px;
    bottom: 50px;
    width: 300px;
    height: 400px;
}

.container-header {
    width: 100%;
    float: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: move;
}

.container-header>label {
    display: block;
    width: 100%;
    float: left;
    margin: 0px;
    cursor: move;
}

.container-header>button {
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    border: none;
    font-size: 20px;
    background: transparent;
    cursor: pointer;
}

.container-header>span {
    display: block;
    float: left;
    width: 100%;
    cursor: move;
}

.container-header:hover>button {
    background: #e6ecf0;
}