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

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

DND-包装/ template.hbs

{{yield (action "register")}}

DND-包装/ 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-桶/ template.hbs

<h2>bucket {{value}}</h2>
<ul>
    {{#each filteredItems as |item|}}
    {{dnd-item item=item register=register}}
  {{/each}}
</ul>

DND-桶/ component.js

export default Ember.Component.extend({
  items: null,registerWithWrapper: Ember.on('didInsertElement',function() {
    this.register('bucket',{
      component: this,element: this.$('ul')[0]
    });
  }),filteredItems: Ember.computed('items.@each.bucket',function() {
    return this.get('items').filterBy('bucket',this.get('value'));
  })
});

DND项/ template.hbs

{{item.title}}

DND项/ component.js

export default Ember.Component.extend({
  registerWithWrapper: Ember.on('didInsertElement',function() {
    this.register('item',element: this.$()[0]
    });
  })
});

在线演示：http://ember-twiddle.com/c086d2853a926c310a23

GitHub演示：https://github.com/RyanHirsch/dragula-ember-example

resetView: function() {
  Ember.run.scheduleOnce('render',this,() => {
    this.set("listVisible",false);
  });
  Ember.run.scheduleOnce('afterRender',true);
  });
}