如何在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内部并将系统配置为

<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

我已经使用 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