标签: ng2-dragula

使用ng2-dragula.我正在寻找使用新删除的订单更新数据库中每个项目的orderNumber.

dragulaService.dropModel.subscribe((value) => {
  var drake = dragulaService.find('bag-orders').drake
  var models = drake.models
  console.log(models)
})

它返回的新模型订单不反映包中的订单.

TL; DR:有没有人用ng2-dragula在数据库onDrop中实现重新排序？

我有一个列表网格,我试图使用ng2-dragula拖动和交换网格的瓷砖

some.component.html

   <md-grid-list rowHeight="200px" id = "cover" >
      <md-grid-tile *ngFor="let werbedata of werbedaten" 
       [class.selected]="werbedata === selectedWerbedata"
       [routerLink]="['/flyerdetail',werbedata.artnr]"
       [style.background]="'lightblue'" class = "blocks"
       [dragula]='"bag-one"'>

     <md-list class="example-card">
         <md-list-item>Produktname: {{ werbedata.werbetext }}</md-list-item>
         <md-list-item>Euro: {{ werbedata.euro }}</md-list-item>
         <h3 md-line> Artnr: {{ werbedata.artnr }} </h3>
         <p md-line> Werbetext: {{ werbedata.werbetext }}  </p>
     </md-list>

   </md-grid-tile>
</md-grid-list>

some.component.ts

export class FlyerComponent implements OnInit { 
    werbedaten: WerbeData[];
    selectedWerbedata: WerbeData;

    constructor( private werbedatenService: WerbeDatenService ){};

    ...
    ...
}

我的想法是在Drop事件上交换数据.是否有可以像这样添加到HTML的onDrop事件？

(onDrop) = "swap(data)"然后swap(data:any)在组件类中执行？

或者我必须初始化dragulaservice？是否有更好的交换方式？

我对于棱角分明的我是个新人,我发现这个非常难以跟随.任何提示将不胜感激？

我正在构建一个Angular 7应用程序，当我添加一个包npm install dragula --save并将其导入pollyfills.ts文件时，出现此错误：

index.js：2未捕获的ReferenceError：在Object ../ node_modules / crossvent / src 处的webpack_require（bootstrap：83）处的Object ../ node_modules / custom-event / index.js（index.js：2）处未定义全局/crossvent.js（crossvent.js：3）在webpack_require（自举：83）在对象../ node_modules / dragula / dragula.js（dragula.js：4）在webpack_require（自举：83）在模块../ SRC在webpack_require（bootstrap：83）上的/polyfills.ts（polyfills.ts：1）在object.1（polyfills.ts：92）在webpack_require（bootstrap：83）

当我用谷歌搜索时，每个人都说要添加(window as any).global = window;到pollyfills.ts我已经做到这一点，但我仍然收到错误。我也准备删除node_modules文件夹，并且npm i我也已经完成了。

我不知道还要在这里做什么。谁能告诉我一些建议或至少解释为什么会这样？

这可能无关紧要，但我也将添加它。在将它们导入之前，还存在一个错误pollyfills.ts

Accordion-group.component.ts：9 Uncaught ReferenceError：未在webpack_require（../src/app/components/accordion/accordion-group.component.ts（accordion-group.component.ts：9）上定义全局变量 bootstrap：83）在Module ../ src / app / components / accordion / accordion.module.ts（accordion.component.ts：10）在webpack_require（bootstrap：83）在Module ../ src / app / …

我想在顶部显示名称组并取消它上面的拖动事件.如何禁用移动某个元素,如果该组名称在顶部.我的代码是:

dragulaService.drag.subscribe((value) => {
    console.log(`drag: ${value[0]}`);
});

我的模板:

<div class='wrapper'>
  <div class='container' *ngFor='let group of groups' [dragula]='"nested-bag"'>
     <div class="center-block">Table Number : {{group.name}}</div>
    <div *ngFor='let item of group.items' [innerHtml]='item.name'></div>
  </div>
</div>

使用ng2-dragula拖放包装库为角2 dragula.

https://github.com/valor-software/ng2-dragula

看到[dragulaModel]='myList' ...项目被丢弃的问题...... 噗 ......它消失了.

检查元素,我看到它仍然在模型中,但DOM元素失去了它inner html(变成空div) - 导致div"显示"被隐藏.

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({

moduleId: module.id,
selector: 'my-app',
template: `
 <div>
    <div class='wrapper'>
      <div class='container' *ngFor='let fixture of fixtures' [dragula]='"first-bag"' [dragulaModel]='fixtures'>
        <div>{{fixture.name}}</div>
      </div>
    </div>
  </div>
`,
viewProviders: [DragulaService],
styles: [`
.wrapper {
  display: table;
}
.container {
  display: block;
  background-color: rgba(255, 255, 255, 0.2);
  width: 200px;
}
.container div,
.gu-mirror {
  margin: 10px;
  padding: 10px;
  background-color: …

我正在使用 ng2-dragula 并在 2 个表中进行数据绑定。当将 td 拖放到另一个表时，它会抛出 Uncaught TypeError: Cannot read property 'splice' of undefined。并且无法删除该元素。需要有关如何解决此问题的帮助。

下面是html部分

    <table class="table">
        <thead class="text-primary">
            <tr>
                <th>Task ID</th>
                <th>Ref #</th>
                <th>Customer Name</th>
                <th>Doc Type</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody [dragula]='"team-bag"' [dragulaModel]="tasks">
            <tr *ngFor="let t of tasks">
                <td>{{t.id}}</td>
                <td>{{t.refNbr}}</td>
                <td>{{t.custName}}</td>
                <td>{{t.docType}}</td>
                <td>{{t.receiveDate}}</td>
            </tr>
        </tbody>
    </table>
    
        <table class="table">
        <thead class="text-primary">
            <tr>
                <th>Task ID</th>
                <th>Ref #</th>
                <th>Customer Name</th>
                <th>Doc Type</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody [dragula]='"team-bag"' [dragulaModel]="agentATasks">
            <tr *ngFor="let t of agentATasks">
                <td>{{t.id}}</td>
                <td>{{t.refNbr}}</td>
                <td>{{t.custName}}</td>
                <td>{{t.docType}}</td>
                <td>{{t.receiveDate}}</td>
            </tr>
        </tbody>
    </table> …

我正在尝试使用 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
});

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

我正在使用 Dragula 在我的桌子上进行拖放。另外，我使用插件角度调整器元素来调整表列的大小。所有这些都是我在 Angular2 中工作的。

所以我想要的是这个。我目前的情况就像图像上的这个灰色柱子。整个列的宽度是可拖动的，这使我在调整列大小时遇到​​问题。因此，当我尝试调整列大小时，它的作用就像拖放一样。我希望我的专栏像这个黄色的那样。有一些调整大小的空间。

这是我的 html 代码的一部分：

<div class="row" [dragula]='"one-bag"' [dragulaModel]='names'>
    <div class="col" *ngFor="let name of names"
         mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{right: true}"
         [enableGhostResize]="false">
         <label>{{name}}</label>
    </div>  
</div>

这是我一直在使用的缩放器。 https://github.com/mattlewis92/angular-ressized-element

问题：如何在同一表列上使用 ng2-dragula 和 resizer？

我有一个text元素列表，希望在拖动新元素时自动将列表滚动到底部。

一旦我拖放列表中的元素一次，下面的示例就可以正常工作。

我相信我需要observable在拖动之前调用一次。

我正在使用dragula和dom-autoscrolling。

import {takeUntil} from "rxjs/internal/operators/takeUntil";
import * as autoScroll from 'dom-autoscroller';

const drake = this.dragulaService.find(this.dragulaBagName);
this.dragulaService.drag.pipe(
  takeUntil(this.destroyed$),
).subscribe(([bag, movingEl, containerEl]) => {
  autoScroll(containerEl.parentNode, {
    margin: 20,
    pixels: 10,
    scrollWhenOutside: true,
    autoScroll: function () {
      return this.down && drake && drake.drake && drake.drake.dragging;
    }
  });
});

显然，this.down在回调中autoScroll中设置为false......一旦拖放一次，它就可以正常工作。

有任何想法吗？

我正在处理 angular 4 项目，我需要拖动项目，所以我使用 ng2-dragula 插件为我做这件事。现在我需要在下降到特定位置后从每一行中提取 data-id 属性。

 dragulaService.drop.subscribe(
      (args) =>{
        const [bagName, elSource, bagTarget, bagSource, elTarget] = args;
        console.log('after', $(bagSource)); // element after the inserted element
});

在 $bagSource 变量中，我将按新顺序获取每一行。说是

<tr attributes  data-id="23"><tr>
<tr attributes  data-id="2"><tr>
<tr attributes  data-id="32"><tr>

我如何从每个 tr 字段中提取数据 ID。我需要以数组中的新顺序获取每个 id。我要求的结果应该是 [23,2,32]；

jquery $(element).attr("data-id") 等效于 angular 4。