在Angularjs中拖动项目时禁用jquery UI拖动

Disable jquery UI dragging when Item dragged in Angularjs

本文关键字：拖动 jquery UI 项目 Angularjs      更新时间：2023-09-26

在我的Angularjs应用程序中，我有一个项目列表，用户可以拖动每个项目。每个项目都是指令，并将其命名为simple-element:

app.directive('simpleElement',function(){
 return {
  restrict:'AE',
  template:'<span>Item</span>',
  controller:function(){
  },
  link:function(scope,element,attrs){
   element.draggable({
    revert:true,
    helper:'clone'
   });
  }
 }
});

现在我想当用户拖动每个项目时，即使拖动成功与否，也要使项目的拖动事件disabled，这样用户就不能再拖动项目了。我在Plunker上创建了一个具有拖放功能的示例。

我找到了解决方案。我不知道这是否是最佳实践，但它对我有效。我在link函数中插入了以下代码行：

 $scope.$watch('item.visible',function(){
                //Enable Disableing when Item draged
                if($scope.item.visible == false){
                    element.draggable( "disable" );
                }
                if($scope.levelModel.visible == true){
                    element.draggable( "enable" );
                }
            });

首先观察模型的visible属性。然后，如果模型中的属性发生变化，我决定启用或禁用该元素。

相关文章：