Código
<!doctype html> <?xml version="1.0" encoding="UTF-8"?> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:v="urn:schemas-microsoft-com:vml"> <head> <script src="js/jquery-1.9.0-min.js"></script> <script src="js/jquery-ui-1.9.2-min.js"></script> <!-- <script src="js/jquery.ui.touch-punch.min.js"></script> --> <script src="js/jquery.jsPlumb-1.5.4-min.js"></script> <script type="text/javascript"> //$(document).ready(function() { //var elem = $('div[class^="container_"]'); //}); </script> <style type="text/css"> #container{width: 600px;height: 600px;background-color: #f3f3f3;overflow: hidden;margin-left: auto;margin-right: auto;} #container div:hover{cursor: pointer;} .container_0, .container_1{position:relative; width: 100px; height: 100px; background-color: red;} .container_1{top:20px;left: 20px;} .container_0{top:20px;left: 300px;} ._jsPlumb_drag_select * { /* background-color: blue; */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body> <button class="dragElem">Drag</button> <div id="container"> <div class="container_0"></div> <div class="container_1"></div> </div> <script type="text/javascript"> //$(document).ready(function(){ jpcl = jsPlumb.CurrentLibrary; _bind = jpcl.bind; jsPlumb.ready(function() { var elem = $('div[class^="container_"]'); var pointConf = { anchor:"Continuous", uniqueEndpoint:true, deleteEndpointsOnDetach:false, endpoint:["Rectangle", { width:40, height:20 }], maxConnections:3 }; var instance = jsPlumb.getInstance({ Connector : "Flowchart", DragOptions : { cursor: "pointer" }, Container : "container" }); instance.doWhileSuspended(function() { // No se puede utilizar makeSource si el elemento puede ser movido //jsPlumb.draggable(elem); instance.makeTarget(elem, pointConf); instance.makeSource(elem, pointConf); instance.bind("click", function(conn, originalEvent) { if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?")) instance.detach(conn); }); var buttonDrag = jsPlumb.getSelector(".dragElem"); _bind(buttonDrag, "click", function(event) { var stateBool = instance.toggleDraggable(elem); // Aqui esta el problema //instance.setDraggable(elem, true); // Tambien trate de usar setDraggable(), pero obtengo el mismo error alert(stateBool); event.stopPropagation(); event.preventDefault(); }); }); }); //}); </script> </body> </html>
Este es el error que siempre obtengo... no se el por que
Citar
Error: cannot call methods on draggable prior to initialization; attempted to call method 'option'
Estoy haciendo el ejemplo con jquery-1.9.0-min.js, jquery-ui-1.9.2-min.js, jquery.jsPlumb-1.5.4-min.js.
http://jsplumbtoolkit.com/apidocs/jsPlumbInstance.html#toggleDraggable
http://jsplumbtoolkit.com/apidocs/jsPlumbInstance.html#setDraggable