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

Posted 2023-05-08

【中文标题】动态生成的网格无法在 Angular 2 打字稿中拖动

【英文标题】：Dynamically generated grid could not be draggable in angular 2 typescript

【发布时间】：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 中发布它们，它不可读。

【参考方案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 方法中。

希望对你有帮助。