Question

我似乎无法理解为什么我的jsplumb无法正常工作。我创建了一个非常简单的sippet示例（附在这篇文章中）。

jsPlumb.ready(function() {

  jsPlumb.draggable($('.square'))

  jsPlumb.connect({
    source: "element1",
    target: "element2"
  });

});

.square {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
}

<body>
  <h1>Hello World!</h1>

  <div id="element1" class="square"></div>
  <div id="element2" class="square" style="left:300px"></div>


  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="jsplumb@*" data-semver="1.7.2" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>

</body>

我已经将我在css中的定位设置为绝对，但我很难过为什么我无法让它工作。我将它与工作示例进行了比较，并通过文档阅读没有成功。

我真的很感激任何帮助。

我哪里错了？

Answer 1

尝试使用

elementsList = jsPlumb.getSelector（＆＃39; .square＆＃39;）; jsPlumb.draggable（elementsList）;

否则直接给出元素 jsPlumb.draggable（$（＆＃39;＃element1＆＃39;））; jsPlumb.draggable（$（＆＃39;＃element2＆＃39;））;

Answer 2

一般来说，这种动画功能是在jquery-ui而非核心jquery中实现的。 http://jqueryui.com/draggable/

我认为在jsPlumb.js Draggable的早期版本中，操作依赖于jquery-ui。

尝试在代码中添加jquery-ui库。我已经将此添加到您的代码中并且有效;

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

jsplumb draggable不工作。

2 个答案: