オブジェクトをドラッグしたときにCSSクラスに値を割り当てるCSS/JavaScript/AngularJS

Question

リストとカードを使用してプロジェクトを作成しました。

リストは1つずつ表示され、カードはリストの下に1つずつ表示されます。

私はディレクティブドラッグアンドドロップを使用します。あるカードを他のリストにドラッグすると、私はそのカードを落とす。私はカードを保持している場所で作成されます。私は、CSS word-wrap: break-word;に使用

<li class="DnDPlaceHolder"></li> 

次いで高liは、すべてのカード（幅が一定である）で異なっています。

シャドーカードを作成したいと思います（このカードの場合のように）。つまり、私はカードを保持しているところにあります。

私が持っているこのカードのパラメータ（高さ、幅）です。

問題は、私がliをドラッグしたときにそれを作る方法です。Card/liは、純粋なjavascriptまたはangleだけを使ってクラス "DnDPlaceHolder"のパラメータを自動的に割り当てます。

これはまったく可能ですか？

編集影を書き込むことで、私は（CSS：ボックスシャドウ）を意味するものではありません

Answer 1

を[OK]を、これは単なる提案で、うまくいけば、あなたはそれが役に立つでしょう。私はこれがドラッグされた要素の幅/高さを取得すると信じて、周りを遊び、イベントから他の値を取得しようとすることができます。幅/高さがあるときにその時点でこれを終了するには、isBigCard = trueという名前のスコーププロパティをスコープに追加して、そのプレースホルダのクラスを有効にし、それを大きくします。

 <ul id="first" 
     dnd-list="lists" 
     dnd-allowed-types="['item']" 
     > 

     <li ng-repeat="item in lists" ng-init="ind = $index" 
     dnd-type="'item'" 
     dnd-draggable="item" 
     dnd-moved="lists.splice($index, 1)" 
     dnd-effect-allowed="move" 
     dnd-selected="models.selected = item" 
     ng-class="{'selected': models.selected === item}" 
     > 

      {{item.name}} 
     <ol id="second" style="min-height: 30px" dnd-list="item.cards" 
      dnd-drop="dropCallback($index, item, lists, ind)" 
      dnd-allowed-types="['card']" 
      dnd-dragover="dragoverCallback(event,index, external, type)" 
      > 
      <li style="list-style-type: none;" ng-repeat="card in item.cards" 
      dnd-type="'card'" 
      dnd-draggable="card" 
      dnd-effect-allowed="move" 
      dnd-dragstart="dragStart" 
      dnd-moved="item.cards.splice($index, 1)" 
      > 
      {{card.name}}</li> 
      </ol> 
    </li> 
</ul> 

あなたはそれを上にドラッグした後、幅と高さを持つことになります

のdragoverコールバック：

$scope.dragoverCallback = function(event,index, external, type){ 

    let width = event.srcElement.clientWidth; 
    let height = event.srcElement.clientHeight; 
    console.log(width, height) 
    return true; 
}