http://jsfiddle.net/taoist/fsmX7/
In the code example above I would like the default state of the .textDivContainer to not be draggable. Then when the user clicks the green button I want the editor to close (which it does) and I would like the .textDivContainer to be draggable. Then once the user clicks the button again the editor would open and the div would not be draggable hence creating a toggle switch. As it stands this does not work.
However, I do have it working without JsPlumb using the default JQuery draggable method. This is viewable below.
The Draggable method in the Non-JSPlumb JSfiddle below accomplishes this by using 2 different property values titled "enable" and "disable". These do not seem to work with JSPlumb. I attempted to use those two properties with JSplumb to no avail. They might work but if so I am lost as to how to implement them.
Below is the final JSFiddle thus far which is a semi-working JSplumb version. This uses a class swap to implement the draggable feature. It defaults to non-draggable and when the green button is clicked it becomes draggable. However, when the green button is clicked a second time it does not stop the draggable.
http://jsfiddle.net/taoist/fsmX7/1/
$(document).ready(function() {
jsPlumb.bind("ready", function() {
var dragToggle = null ;
$(".textButton1"). mousedown(function(){
if (dragToggle===null){
dragToggle = '.textDivContainer1';
}
else if (dragToggle === '.textDivContainer1'){
dragToggle=null;
}
console.log(dragToggle);
jsPlumb.draggable($(dragToggle), { snap: true});
});
});
});
Answer:
Use setDraggable(el, draggable)
http://jsplumbtoolkit.com/apidocs/files/jsPlumb-1.4.1-apidoc.html#jsPlumb.setDraggable(el,draggable)