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

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

所以你可以添加jqyoui-dragable正在生成的拖动事件（我假设它的角度拖动）：

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

该活动的文档位于网页中。

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

  

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

所以在它显示的文档中

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

jsut在控制器中添加回调：

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

并在框中添加

ng-class={'opacityClass':isDragged}

对于另一个选项，只需检查鼠标何时关闭但未启动并看到鼠标移动已被触发，如果发生所有这些状态，请更新ng-class.Dont看看为什么但是如果你想得到Ill的帮助

自然如果

Answer 2

在拖动过程中，拖动的项目会将ui-draggable-dragging样式附加到class属性。

将此添加到css将起到作用：

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