动态生成的网格无法在 Angular 2 打字稿中拖动答案

【问题标题】：Dynamically generated grid could not be draggable in angular 2 typescript动态生成的网格无法在 Angular 2 打字稿中拖动
【发布时间】：2016-12-07 14:35:42
【问题描述】：

//在打字稿文件中使用这个

      jQuery(function() {
            // initialize Packery
            var $grid = jQuery('.grid').packery({
                itemSelector: '.grid-item',
                // columnWidth helps with drop positioning
                columnWidth: 100,
                rowHeight: 100
            });

            // make all items draggable
            var $items = $grid.find('.grid-item').draggable();
            // bind drag events to Packery
            $grid.packery('bindUIDraggableEvents', $items);
        });

//在html文件中使用这个

         <div class="grid">   
     <div *ngFor=" let box of gridJSON " class="grid-item grid-item--width2 grid-item--height2"  ></div>
    </div>

//为此工作正常

      <div class="grid">   
         <div  class="grid-item grid-item--width2 grid-item--height2"  ></div>
     <div  class="grid-item grid-item--width2 grid-item--height2"  ></div>
        </div>

//不适合这个

     <div class="grid">   
         <div *ngFor=" let box of gridJSON " class="grid-item grid-item--width2 grid-item--height2"  ></div>
        </div>

当我静态放置网格时，可拖动功能工作正常，但是当我使用 *ngFor 创建网格时，它不起作用。

【问题讨论】：

因为你实现的可拖动行为是错误的。你是怎么做到的？
因为它不起作用？
请帮帮我，如何使用相同的可拖动插件为动态网格实现可拖动组件。
packery.metafizzy.co/draggable.html
你能用代码更新你的答案吗，不要在 cmets 中发布它们，它不可读。

标签： angularjs angular draggable

【解决方案1】：

在你的组件中设置一个私有变量：

private packery: any;

在 ngOnInit() 中调用 initGrid 函数（如下所述），如下所示：

ngOnInit() {           
   setTimeout(() => this.initGrid(), 0);
}

setTimeout 将等待您的 html 中的 ngFor 完成生成您的 div 网格项。

initGrid 方法：

initGrid() {
        let elem = document.querySelector('.grid');
        this.packery= new Packery(elem, {
            itemSelector: '.grid-item',
            gutter: 10,
            columnWidth: 250
        });

        var elems = this.packery.getItemElements();
        elems.forEach(gridItem => {
            var draggie = new Draggabilly(gridItem);
            // bind drag events to Packery
            this.packery.bindDraggabillyEvents(draggie);
        });
    }

如果你不喜欢 initGrid，我认为你可以将你的函数包装在一个 setTimeout 方法中。

希望对你有帮助。

【讨论】：