패커리에 동적 VueJS 구성 요소를 추가하는 방법

패커리에 동적 VueJS 구성 요소를 추가하는 방법

안녕 나 짐싸는 거에 문제가 생겼어.

이 솔루션 기반 https://codepen.io/Monocle/pen/ZbeBGL

나는 모든 격자를 가지고 있다. 구성 요소로서 그리고 app.js (메인 파일)에서 주어진 예에 기초하여 패킹을 초기화한다.

  var pckry = new Packery(container, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
  });

이제 켜기/끄기 구성 요소를 처리한 후 드래그가빌리(draggabilly)로 만들고 패킹에 바인딩/바인드를 해제하십시오.하지만 문제는 내가 vue의 물건으로 포장재를 만들 수 없다는 것이다. 그리고 이것만 만든다.pckry.getShiftPositions() (예: https://codepen.io/desandro/pen/PZrXVv))

pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

문제는 내가 추측하기에 포장된 물건의 인스턴스(instance)를 취급하는 것이다.그냥 안 먹힐 뿐이야.

this.pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = this.pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

실제로 효과가 없다.로 만들 때

this.pckry = newPackery(...);

내가 그걸 어떻게 처리할 수 있을까?

이 짐꾸러기 도서관을 이용할 때부터, 오랜 시간이 흘렀다.나는 그리드에 무언가를 추가할 때마다 패킹 인스턴스를 다시 만들 수 있었지만 패킹 인스턴스는 다시 분류하기 때문에 이상적이지 않다.사실 1차원 기본 정렬(목록처럼)이다.그래서 그것은 여전히 내가 기대했던 대로 작동하지 않는다.나는 모든 그리드 항목에 대해 (x,y) 위치를 저장해야 했다.

Additiony Vue Virtual DOM과 jquery DOM은 뭔가 다른데 제대로 작동하지 않고, 사용하는 것도 흔치 않은 것 같아.

현재 나는 VueJS를 위한 나만의 그리드 레이아웃을 만들고 있다.그리고 최종 변경 작업을 하고 있다.너는 여기서 나를 따라갈 수 있다: https://github.com/lrembacz/vue-responsive-grid-layout

참조URL: https://stackoverflow.com/questions/45721880/how-to-add-dynamiclly-vuejs-component-to-packery