0

primeNg ショーケースで提供されているドラッグ アンド ドロップの例によく似た単純なシナリオがあります。

ドラッグできるオブジェクトを表す「 draggableThings 」の配列があります。このようなdraggableThingsは、画面に列の形で表示されます (詳細のためにブラウザの左側に表示されます)。

draggableThingsをドロップできる「バスケット」の配列もあります。バスケットは、画面の下部に一列に並んで表示されます。

私の問題は、ループでバスケットの行を作成すると、ディレクティブが機能しないように見えることです (つまり、droppableThingを 1 つのバスケットにドロップするときにイベントが呼び出されません)。*ngForpDroppableonDrop

htmlコードは次のとおりです。

<div class="ui-grid ui-grid-pad ui-grid-responsive">
    <div id="plan-area" class="ui-grid-row">

      <!-- ************************  -->
      <!--     LEFT SIDEBAR          -->
      <!-- ************************  -->
      <div class="ui-grid-col-1 ui-widget-content">
        <ul style="margin:0;padding:0">
            <li *ngFor="let droppableThing of droppableThings" 
                class="ui-state-default ui-helper-clearfix" pDraggable="droppableThings"
                (onDragStart)="dragStart($event,droppableThing)" (onDragEnd)="dragEnd($event)">
                <dthing [droppableThing]="droppableThing"></dthing>
            </li>
        </ul>
      </div>

      <!-- ************************  -->
      <!--          CHART AREA       -->
      <!-- ************************  -->

      <div id="chart-area" pDroppable="droppableThings" (onDrop)="drop($event)" 
        class="ui-grid-col-9" [class.ui-state-highlight]="draggedThing">
            <div class="planning-timeline" class="ui-grid-row">
                <div class="basket">
                        BasketA
                </div>
                <div class="basket">
                        BasketB
                </div>
                <div *ngFor="let basket of getBaskets(); let i=index" class="basket">
                        basket {{i}}
                </div>
            </div>
      </div>

  </div>
</div>

この HTML では、ドラッグ アンド ドロップはBasketAとBasketB では正しく機能しますが、ループの一部として作成されたバスケットでは機能しません。*ngFor

どんな助けでも大歓迎です。

前もって感謝します

4

2 に答える 2

-2

pDraggable と pDroppable の値は小文字にする必要があります。どういうわけか、キャメル ケースの値が機能しません。

于 2016-11-28T06:34:23.210 に答える