jsplumb draggable not working.

问题

I can't seem to work out why my jsplumb is not working. I have created a very simple sippet example (attached to this post).

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>

I have set my positioning in the css to absolute but I'm stumped as to why I can't get it working. I compared it to working examples and read through the documentation with no success.

I would really appreciate any help with this.

Where am I going wrong?

回答1:

try using

elementsList = jsPlumb.getSelector('.square'); jsPlumb.draggable(elementsList );

else directly give elements jsPlumb.draggable( $('#element1')); jsPlumb.draggable( $('#element2'));

回答2:

Generally speaking, this kind of animation features are implemented in jquery-ui instead of core jquery. http://jqueryui.com/draggable/

I think in this early version of jsPlumb.js Draggable operation is dependent to jquery-ui.

Try to add a jquery-ui library to your code. I've added this to your code and it worked;

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

来源：https://stackoverflow.com/questions/30767889/jsplumb-draggable-not-working

标签

draggable

jsplumb