jsplumb draggable not working.

Asked 10/6, 2015 at 21:47 Answered 5/6, 2016 at 21:20

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?

Toupee answered 10/6, 2015 at 21:47 Comment(1)

Not sure what is wrong, but if I use the latest version of jsPlumb: jsplumbtoolkit.com/lib/jsPlumb-2.0.7-min.js your code snippet just works... – Hydrometeor 26/2, 2016 at 10:11

try using

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

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

Business answered 11/6, 2015 at 12:8 Comment(1)

Ah no I see what you mean... with ids.. yes I tried that also. – Toupee 12/6, 2015 at 9:14

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>

Wessex answered 5/6, 2016 at 21:20 Comment(0)

Recommended topics

Hot tags