5

我正在尝试使用 ng2 dragula 复制一种方式拖放这是我的模板。

`<div>
   <div class='wrapper'>
     <div class='container' id='no-drop' [dragula]='"first-bag"'>
       <div>Drag/drop item 1</div>
     </div>
     <div class='container' [dragula]='"first-bag"'>
       <div>Drag/drop item 2</div>
     </div>
   </div>
 </div>`

我已经设置了在我的组件中复制的选项。

constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('first-bag', {
  copy: true
});

但是如果我将moves设置为false，我根本无法拖动。我怎样才能从左到右而不是相反。

4

3 回答 3

7

发布后我很快就找到了答案！

   constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('first-bag', {
      copy: true,
      moves: function (el, container, handle) {
        return container.id !== 'no-drop';
      }
    });
于 2017-04-19T16:19:41.210 回答
3

默认情况下，dragula 将允许用户拖动任何容器中的元素并将其拖放到列表中的任何其他容器中。如果元素被丢弃在不是容器之一的任何地方，则该事件将根据 revertOnSpill 和 removeOnSpill 选项优雅地取消。

下面的示例允许用户将元素从左拖到右，从右拖到左。在 HomePage.component.html 中创建代码

 <div class="wrapper"> <div class="container master" [dragula]="'editor-bag'" [dragulaModel]="q1">

      <div *ngFor="let item of q1" class="box">
      {{item}}
      </div>
 </div>
 <div class="container" [dragula]="'editor-bag'">
 </div>

接下来，创建 HomePageComponent.ts。此外，需要设置具有以下签名的接受方法：（el，目标，源，兄弟）

import { DragulaService, DragulaDirective } from 'ng2-dragula/ng2-dragula';
import { Router, Route, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css'],
})
export class HomePageComponent implements OnInit {
  q1 = [];
  q2 = [];
  static _debug: boolean = false;
  _debug: boolean = HomePageComponent._debug;
  constructor(private dragulaService: DragulaService, private router: Router, private route: ActivatedRoute) { 
    for (var i = 0; i < 10; i++) {
      this.q1.push("1. <" + i + ">");
      //this.q2.push("2. <" + i + ">");
    }

      dragulaService.setOptions('editor-bag', {      
      accepts: function (el, target, source, sibling) {
        var fn_debug = true;
        var acceptAll = false;

          if (this._debug || fn_debug) {
            console.log("accepts() start el, target, source, sibling");
            console.log({ el, target, source, sibling });
          }
          if (target.classList.contains('master')) {
            return false;
          }
          if (sibling == null) {
            return (target.children.length == 0);
          }
          var name: string = el.innerText;
          return false;
        },

      direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
      copy: function (el, source) {
        if (this._debug) {
          console.log("copy() start");
          console.log(el);
          console.log(source);
          console.log("copy() stop");
        }
        return source.classList.contains('master');
      },                       // elements are moved by default, not copied
      copySortSource: false,             // elements in copy-source containers can be reordered
      revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
      removeOnSpill: true,              // spilling will `.remove` the element, if this is true
      mirrorContainer: document.body,    // set the element that gets mirror elements appended
      ignoreInputTextSelection: true     // allows users to select input text, see details below
    })
  }
  ngOnInit() {

      this.dragulaService.drag.subscribe((value: any) => {
        if (this._debug) {
          console.log("drag start");
          console.log(value);
          console.log("drag stop");
          console.log(`drag: ${value[0]}`);
        }
       // this.onDrag(value.slice(1));
      });

      this.dragulaService.drop.subscribe((value: any) => {
        console.log(`drop: ${value[0]}`);
        //this.onDrop(value.slice(1));
      });

      this.dragulaService.over.subscribe((value: any) => {
        if (this._debug) { console.log(`over: ${value[0]}`); }
       // this.onOver(value.slice(1));
      });

      this.dragulaService.out.subscribe((value: any) => {
        if (this._debug) { console.log(`out: ${value[0]}`); }
        //this.onOut(value.slice(1));
      });
    }

}

我正在发布我的解决方案，因为它也可能对某人有所帮助。

于 2017-05-08T12:44:58.487 回答
1

我更喜欢使用接受函数而不是使用移动函数。

因为使用移动功能，您可以停止从容器中移动项目。接受函数决定目标容器是否有效。 

accepts: function (el, target, source, sibling) {
              // your condition
            },
于 2017-04-28T14:02:42.367 回答