動態生成的網格不能在角2打字稿可拖動

Question

//在打字稿文件使用此

 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創建網格時，它不起作用。

Answer 1

設置爲私有變量在組件：在ngOnInit

private packery: any; 

調用initGrid功能（如下所述）（）這樣的：

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

的setTimeout的將等待ngFor從html完成生成你的div grid-items。

的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方法。

希望它有幫助。