Qerjiuthn Qerjiuthn - 4 months ago 34
Javascript Question

Set Container Element of a jsPlumb Line

I have two small green

div
s within my canvas. It can be drag within the canvas with an id
myid_templates_editor_canvas
, with the use of the code below:

myid_templates_editor_make_draggable('div1');
myid_templates_editor_make_draggable('div2');

// Make an element draggable within the canvas
function myid_templates_editor_make_draggable(id){
jQuery('#' + id).draggable({
cursor: 'move',
cursorAt: { top: 56, left: 56 },
containment: '#myid_templates_editor_canvas',
});
}


See images below:

enter image description here

enter image description here

I have made a line between 2 draggable divs using jsPlumb.

var jsPlumb_instance = jsPlumb.getInstance();
var endpointOptions = {
anchor:'BottomCenter',
maxConnections:1,
endpoint:['Rectangle',{width:'0px', height:'0px' }],
paintStyle:{fillStyle:'black'},
connectorStyle : { lineWidth: '1px' , strokeStyle: 'black' },
connector : ['Straight'],
setDragAllowedWhenFull:true,


};

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions);
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);

jsPlumb_instance.connect({
source:div1Endpoint,
target:div2Endpoint,
});

jsPlumb_instance.draggable('div1');
jsPlumb_instance.draggable('div2');


I dont want the line outside the canvas border. See 3rd picture.

enter image description here

I want the line to be contained within the canvas with an id
myid_templates_editor_canvas
.See the image below:

enter image description here

I tried changing part of the code above with the the code below, with no luck.

jsPlumb_instance[id].draggable(id1, {containment:'#myid_templates_editor_canvas'});
jsPlumb_instance[id].draggable(id2 , {containment:'#myid_templates_editor_canvas'});


Yes, the two points was somehow constrained because the length of the maximum line was limited but still goes out of the border of the canvas.Below is the html set-up of the canvas and two points.

<table>
<tr>
<td>
<canvas id="myid_templates_editor_canvas"></canvas>
<div id="div1"></div>
<div id="div2"></div>
</td>
</tr>
</table>

Answer

I had made a solution to my problem. I changed my code above to to code below:

myid_templates_editor_make_draggable('div1');
myid_templates_editor_make_draggable('div2');

//Make an element draggable within the canvas
function myid_templates_editor_make_draggable(id){                      
    jQuery('#' + id).draggable({ 
        cursor: 'move',
        cursorAt: { top: 56, left: 56 },
        containment: '#myid_templates_editor_canvas', 
        drag: function(e, ui){      
            jsPlumb_instance.repaintEverything();                                       
        },               
    });     
}

I had also omit the line of code that make JsPlumb two endpoints draggable.

var jsPlumb_instance = jsPlumb.getInstance();   
var endpointOptions = { 
    anchor:'BottomCenter',
    maxConnections:1,                      
    endpoint:['Rectangle',{width:'0px', height:'0px' }], 
    paintStyle:{fillStyle:'black'},
    connectorStyle : {  lineWidth:  '1px' , strokeStyle: 'black' },
    connector : ['Straight'],                   
    setDragAllowedWhenFull:true,                    
};

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions);
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);       

jsPlumb_instance.connect({  
    source:div1Endpoint,
    target:div2Endpoint,
}); 

Hope it helps everyone that is going through the same problem with me.

Comments