标签: angular-dragula

如何使用drop-model事件访问拖放的确切模型项？

来自文档的drop事件的描述:

el在兄弟元素之前被放入目标,最初来自源头

el似乎返回拖动的HTML元素,但我需要对其后面的实际数据项执行操作.任何提示？

 <div class="collapse" id="manageUsers">
    <div class='containerDragula' dragula='"bag"' dragula-model='usersInProject'>
        <div ng-repeat='user in usersInProject' ng-bind='user.email'></div>
    </div>
    <div class='containerDragula' dragula='"bag"' dragula-model='usersNotInProject'>
        <div ng-repeat='user in usersNotInProject' ng-bind='user.email'></div>
    </div>
</div>

$scope.$on('bag.drop-model', function (e, el, target, source) {
    //this returns the html element
    console.log(el);
});

使用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？是否有更好的交换方式？

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

我正在使用Dragula进行拖放功能.它一直有效,直到我从服务器端刷新列表:

this.columnList = newValue;

它接缝,Dragula想要像以前一样保留列表中的顺序,所以它搞乱了服务器端排序顺序.我不需要这个功能.我已阅读文档,教程,示例,但无法找到如何在Dragula中禁用自动排序.

我正在使用angularjs-dragula,我无法自动滚动到屏幕隐藏的溢出容器.

这是我的问题:
我的拖拉机中有五个容器,第五个容器隐藏在屏幕上.现在我想从第一个容器中拖出一个元素并将其放在第5个容器中.但我无法做到这一点,因为屏幕不会自动滚动到第5个容器.

angularjs-dragula是否支持垂直滚动？或者是否有我失踪的财产？

示例Plunkr:https://plnkr.co/edit/iD38MugmHIx298p7OlrI ? p = preview

var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
    dragulaService.options($scope, 'fifth-bag', {
        copy: true
    });
});

我按照这里的说明操作:https://github.com/valor-software/ng2-dragula/wiki#5-min-quickstart以及这里:https://www.npmjs.com/package/ng2- dragula

Angular-quickstart正在运行,按照:

git clone  https://github.com/angular/quickstart  angular2-dragula-test
npm install
npm start

"我的第一个Angular App"(在浏览器中弹出 - 所以一切正常)

我通过以下方式安装dragula:

npm install ng2-dragula dragula --save

我用valor-software ng2-dragula wiki(第一个链接)的确切内容替换了quickstart文件.

如果有人可以提供任何建议(关于非关键的非上市步骤)或简单的健全性检查,将非常感激.