【问题标题】:Dragula :revert drop in ng2-dragulaDragula :revert drop in ng2-dragula
【发布时间】:2017-01-06 19:18:12
【问题描述】:

我有一个带有typescriptangular2 应用程序。我正在使用ng2-dragula 制作拖放应用程序。

我需要检查一个条件,如果条件为假则恢复拖动,我从here 知道revertOnSpill revertOnSpill:true 可以放回元素到它的第一位。

但是,我不知道在 ng2-dragula 中怎么可能。 我在onDrop 中暗示了它。这是代码

 constructor() {

              dragulaService.drop.subscribe((value) => {
                  this.onDrop(value.slice(1));
              });

                dragulaService.setOptions('second-bag', {
                  removeOnSpill: true
              });
 }

private onDrop(args) {
   bla
   bla
   bla
   if(err.status=="404")                                                               
          this.dragulaService.removeModel;
         // this.dragulaService.cancel; also tried but did not work   
}

这里是html代码:

<div   id="toPlay" class="playBox roundedBox" [dragula]="'second-bag'">
    <img class="w3-animate-top" [src]="sax_path" alt="sax" id="saxsophone"/>
    <img class="w3-animate-top" [src]="drum_path" alt="drum" id="drum"/> 
</div>
<div   id="scene"  [dragula]="'second-bag'">

</div> 

Package.json 是:

 "dependencies": {
    "dragula": "^3.7.2"
  },
  "peerDependencies": {
    "@angular/common": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/forms": "^2.0.0"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.22-1",
    "typescript": "2.0.10"
  }

问题是,我不知道如何取消掉落?

【问题讨论】:

标签: angular dragula


【解决方案1】:

有一个名为 boolean moves 的属性,它控制元素是否可移动

this.dragulaService.setOptions('second-bag', {

        moves:  (el, container, handle) =>{

                             if(YourCondition)
                                     //return true;
                             else
                                     //return false; 
                         }))

【讨论】:

  • 非常感谢,我把头发从这根头发上扯下来了。
  • 如果 api 返回 false,我怎样才能找回 drop。我在 onDrop() 函数中调用 api,如果 api 函数失败,那么我想将放置的元素移动到原始容器中。
  • 请注意,在较新的 Dragula 版本中,setOptions 已被 createGroup(groupName, options) 取代
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-09-22
  • 2018-12-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多