标签: 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中实现重新排序？

我希望使用angular-dragula模块(https://github.com/bevacqua/angular-dragula)在我的Angular项目中实现Drag and Drop .但是,它似乎严重依赖于RequireJS.我没有使用Require一段时间,只有一两个示例应用程序.有没有一种简单的方法来解开这个模块的需求？

作者似乎认为它很简单(https://github.com/bevacqua/angular-dragula/issues/23)并且在没有真正解释的情况下也关闭了类似的问题.我查看了代码,但没有看到如何加载模块而没有将RequireJS添加到我的项目中(我不想这样做).我是否坚持使用不使用此模块或添加Require或是否有办法在没有要求的情况下使用此模块？

我正在使用Dragula在Ember中创建一组拖放组件.我将项目列表传递给包含多个可丢弃存储桶的父包装器.最初过滤此项目列表,以便它们在正确的存储桶中呈现正确的项目.然后将Dragula连接起来,以便可以拖放项目.当发生drop事件时,我尝试更新底层的Ember对象.这可能导致重新应用过滤器并进行一些渲染.问题是DOM已被Dragula操纵,并且与Ember认为它应该是不同的并且DOM节点刚刚消失.

当他们认为自己拥有DOM及其当前代表时,我怎么能让Ember和Dragula玩得很好？我已经尝试取消了draggle drop事件,然后让Ember设置了有限的成功值.

dnd-wrapper/template.hbs

{{yield (action "register")}}

dnd-wrapper/component.js

export default Ember.Component.extend({
  drake: null,
  buckets: [],
  items: [],
    initDragula: Ember.on('willInsertElement', function() {
    this.set('drake', window.dragula());
  }),
  setupDragulaEvents: Ember.on('didInsertElement', function() {
    this.get('drake').on('drop', (itemEl, destinationEl, sourceEl) => {
      let dest = this.buckets.findBy('element', destinationEl);
      let source = this.buckets.findBy('element', sourceEl);
      let item = this.items.findBy('element', itemEl);

      item.component.set('item.bucket', dest.component.get('value'));
    });
  }),
  actions: {
    register(type, obj) {
      if(type === 'bucket') {
        this.get('drake').containers.push(obj.element);
        this.buckets.pushObject(obj);
      }
      else {
        this.items.pushObject(obj);
      }
    }
  }
});

dnd-bucket/template.hbs

<h2>bucket {{value}}</h2>
<ul>
    {{#each filteredItems as |item|}} …

在dragula中,你有一个可能的单向副本从一个容器到另一个容器 - 我想将它用于一个UI,你将表示一个元素的符号拖到一个容器中并让它产生"真正的交易" - 真正的交易是任意的不同元件.

大部分内容非常简单:

dragula([].slice.call(document.querySelectorAll('.container')), {
  copy: function (el, source) {
    return source === document.getElementById('c1')
  },
  accepts: function (el, target) {
    return target !== document.getElementById('c1')
  },
  removeOnSpill: true
}).on('drop', function (el) {
    var newNode = document.createElement("div");
    newNode.textContent = "The real deal";
    newNode.classList.add("elem");
    el.parentNode.replaceChild(newNode, el);
});

.container {
  border: 1px solid #000;
  min-height:50px;
  background:#EEE;
}
.elem {
  padding:10px;
  border: 1px solid #000;
  background:#FFF;
  margin:5px;
  display: inline-block;
}

<div id="c1" class="container">
  <div class="elem">Icon1</div>
  <div class="elem">Icon2</div>
  <div class="elem">Icon3</div>
  <div class="elem">Icon4</div>
  <div …

我有一个列表网格,我试图使用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中禁用自动排序.

我正在构建一个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 / …

我有一个Angular2组件,使用ng2-dragula进行拖放,如下所示:

@Component({
  selector: 'my-comp',
  directives: [
    Dragula
  ],
  viewProviders: [
    DragulaService
  ],
  template: `
    <div class="my-div">
      <div *ngFor="#item of items" [dragula]='"card-bag"' [dragulaModel]='items'>
      ...
      </div>
    </div>
  `
})

我的问题:如果我创建了多个"my-comp"组件,"card-bag"中的项目不能拖放这些组件,尽管它们具有相同的包名称.这些项目只能在其拥有的组件内拖放.

我们是否有任何跨组件拖放的配置,或者这是ng2-dragula限制？

谢谢.

编辑：这是我的代码的运行图像：

编辑2：我很好奇是否是弹性框破坏了这段代码？Dragula 是否设计用于与柔性容器一起使用？

我有以下容器：

#myDisplay{
        display: flex;
        justify-content:left;        
        overflow:none;
        flex-wrap: wrap;
        flex-grow: 0;
        position:absolute;
        top: 2.68518519%;
        left:9.96767241%;
        width: 90.03232759%;
        height:97.31481481%;

我使用 React 在该容器中添加 3 行，每行 7 个项目：

#myCard{
        
        color:var(--txtcolor);        
        flex-shrink: 0;
        width:12.44763614549592%;
        height: 31.29381571%;
        background: var(--contentbg);
        border: 3px solid var(--drkblue);
        box-sizing: border-box;
        border-radius: 53px;
        margin-right: 1.7658573%;
        padding-left: 1%;
        padding-right:1%;
        font-size: 0.875rem;

我正在使用以下拖拉古拉代码：

  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };

并像这样声明我的显示框：

  <div id="myDisplay" ref={dragulaDecorator}>
  {renderCard(1)}
  {renderCard(2)}
  {renderCard(3)}
  {renderCard(4)}
  {renderCard(5)}
  {renderCard(6)} …