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?
try using
elementsList = jsPlumb.getSelector('.square'); jsPlumb.draggable(elementsList );
else directly give elements jsPlumb.draggable( $('#element1')); jsPlumb.draggable( $('#element2'));