当我拖动对象CSS/JavaScript/angularJS时，将值分配给CSS类

Question

我已经使用列表和卡片创建了项目。

列表是一个一个一个一个，一个卡片在另一个下方（在列表中）。

。

我使用指令拖放。当我将一张卡拖到另一个列表中时，在我丢下她之前。是在我握住卡的地方创建的。

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

我在CSS word-wrap: break-word;中使用了，然后高度li在所有卡中都不同（宽度为常数）。

我想创建一张影子卡（像为此卡完成的位置）。我的意思是，创建我的卡片

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

，但使用参数（高度，宽度）我持有的这张卡。

问题是，当我将li card/li拖动时，如何使用纯JavaScript或Angular分配" DNDPlaceholder"类的参数。

可以做到这一点吗？

编辑通过编写阴影，我不是说（CSS：Box-Shadow）

Answer 1

好吧，这只是一个建议，希望您会发现它有用。我相信这将使您能够使您的宽度/高度的拖动元素，您可以玩耍并尝试从事件中获取其他值。要在此时完成此操作时，当您具有宽度/高度时，您可以添加一些名为Isbigcard = true scope的范围属性，该范围将打开该占位符并使其更大的范围。

     <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>

拖动后的拖放回调将具有宽度和高度：

$scope.dragoverCallback = function(event,index, external, type){
  let width = event.srcElement.clientWidth;
  let height = event.srcElement.clientHeight;
  console.log(width, height)
  return true;
}