All geek questions in one place

Jsplumb draggable does not work.

I can not understand why my jsplumb is not working. I 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 set my positioning in css to absolute, but I'm at a dead end why I can't get it to work. I compared it with working examples and read the documentation without any problems.

I would really appreciate any help with this.

Where am I mistaken?

0
source share
2 answers

try using

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

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

+1
source

Generally speaking, these types of animations are implemented in jquery-ui instead of the jquery core. http://jqueryui.com/draggable/

I think in this early version of jsPlumb.js Draggable operation depends on jquery-ui .

Try adding the jquery-ui library to your code. I 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>
0
source

Source: https://habr.com/ru/post/905228/

More articles:


All Articles