JSPlumb.draggable 在 Angular 指令中不起作用答案

【问题标题】：JSPlumb.draggable not working inside Angular directiveJSPlumb.draggable 在 Angular 指令中不起作用
【发布时间】：2013-12-31 01:26:09
【问题描述】：

我无法让 JSPlumb 与 Angular 搭配得很好。在我的指令的链接函数中，我想为新元素启用拖动。

angular.module('myApp').directive('knEditorNode',function() { 
[...]
return {
  restrict: 'E',
  replace: true,
  scope: {
    nodeId: '@'
  },
  template: '<div id="{{nodeId}}" class="knNode">Loading ...</div>',

  link: function(scope, element) {
    var nodeModel = service.getNodeModel(scope.nodeId);
    angular.element(element).css('top', nodeModel.top);
    angular.element(element).css('left', nodeModel.left);
    angular.element(element).css('position', 'absolute');

    jsPlumb.draggable(angular.element(element));

    // THIS IS STRANGE (undefined):
    log.info ("dragging enabled: " + angular.element(element).attr('draggable')); 
  }
}
[...]

因此，“可拖动”属性未设置，拖动不起作用。如果我启用直接使用角度（和 JQuery）拖动，它似乎工作：

angular.element(element).attr('draggable', true)

但是还有其他奇怪的效果（例如，不能在某处“放置”元素），所以我认为这还不够，我可能需要尽可能多地使用 JSPlumb API。

我的 HTML 如下所示：

<div id="editorArea" class="knEditorArea panel panel-default">
  <div id="editorCanvas" class="knEditorCanvas">
    <div ng-repeat="(id, viewData) in nodeViews">
      <kn-editor-node node-id="{{id}}" />

相关的css是这样的：

.knEditorArea {
    height: 500px;
    position: relative;
}

.knEditorCanvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

.knNode {
    position: absolute;
    border: 1px solid;
    border-radius: 0.5em;
    color: black;
    height: 5em;
    width: 5em;
    z-index:20;
}

【问题讨论】：

标签： jquery jquery-ui angularjs jsplumb

【解决方案1】：

link 函数中提供的元素 angular 已经是一个 jquery 元素，因此您不需要进一步包装它。我有一个广泛使用 JSPlumb 的 Angular 站点，并且元素对象单独工作。

function link(scope, elem, attrs){
   jsPlumb.draggable(elem, {
      start: function () {},
      drag: function (event, ui) {},
      stop: function (event, ui) {}
    });
}

我不得不将addEndpoint 包装在链接函数内的零秒超时中才能使用。

【讨论】：

我可能只是错过了一些基本的东西......但这里有一个小插曲：plnkr.co/edit/kYV7lt?p=info。我只是不让节点可拖动。

【解决方案2】：

好的，我发现了问题。忘记加载 JQuery UI 库。添加后

  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

一切都按预期进行。

【讨论】：