AngularJS：通过拖放设置拖动项目的样式

Question

基本上，我想要做的就是降低拖动项目的不透明度，使其略微透明。我的问题是，当最初开始拖动时，我似乎无法更改被拖动项目的样式。

<div class=" btn btn-droppable growBackground"
     ng-repeat="folder in Folders"
     data-drop="true"
     ng-model='Folders'
     jqyoui-droppable="{index: {{$index}},  onOver: 'moveFolderOnFolder($index)'}"
     data-jqyoui-options="{accept: '.folder'}">

        <div class="btn btn-draggable grow folder nospacing"
             data-drag="true"
             data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
             ng-model="Folders"
             <!-- IMPORTANT LINE HERE -->
             jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:false, onDrag: 'storeDraggedFolderId(folder.Id)', onStart: 'addDraggingClass()', onStop: 'removeDraggingClass()' }">
            {{folder.Name}}
        </div>

这段代码的重要一点是在 jqyoui 选项中的第二个可拖动 div 中，我通过 onstop 和 onstart 方法应用了 folderopacity 类。

这段代码有如下效果——

底部块是当前被拖动的块。我希望这个具有不透明度样式，但我找不到这样做的方法（至少最初是这样。如果我在拖动完成时不删除类，它将在下次拖动时保持不透明度）。我似乎用一堆不同的属性尝试过这个，但没有成功。

有什么想法吗？

Answer 1

在拖拽的过程中，被拖拽的item会在class属性后面附加ui-draggable-dragging样式。

将其添加到 css 中就可以了：

.ui-draggable-dragging{
    opacity:0.3;
}

Answer 2

如果我理解正确，您想捕捉“拖动”事件并相应地使用 ng-class 来添加/删除类吗？

所以你可以添加一个 jqyoui-dragable 正在产生的拖动事件（我假设它的 angular-dragdrop）：

http://codef0rmer.github.io/angular-dragdrop/#/ 或者你可以只捕获 mousedown mouseup 和 mousemove 事件（容易出错）以及 ng-class 的混合

活动的文档在网页中。

您可能想使用 onStart 事件在控制器中捕获它

onStart- 要调用的回调方法（必须在 控制器）当拖动开始时

所以在它显示的文档中

<div jqyoui-draggable="{onStart:'startCallback(item)'}">

jsut 在控制器中添加回调：

    $scope.startCallback = function(){
    $scope.isDragged = true;
}

并在框中添加

ng-class={'opacityClass':isDragged}

对于另一个选项，只需检查鼠标何时向下而不是向上，并查看 mousemove 是否已被触发，如果所有这些状态都发生更新 ng-class。不知道为什么，但如果你想帮助解决这个问题

如果