javascript - 当我拖动对象 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 的范围属性添加到范围，这将打开该占位符上的类并使其变大。

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