Set Container Element of a jsPlumb Line

Question

I have two small green divs 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:

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.

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

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>

score 3 · Answer 1 · answered Jul 12 '16 at 17:58

I worked with jsPlumb for quite long already and I remembered it need to refer to a lot of library.

Because jsPlumb using draggable feature from jQuery UI, you can read this article for understanding how it is being worked.

https://jqueryui.com/draggable/#constrain-movement

In your case, myid_templates_editor_canvas will not be consider as the containment, it is for drawing only. So I suggest you to modify your html as below try, let me know your result as well.

I put an ID for table element and it will be the containment for 2 end points. The containment must be an element that contains child element - in the other words - parent element.

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: '#main-container',                
    });     
}

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

score 3 · Answer 2 · answered Jul 16 '16 at 21:09

Actually you can set containment via jsPlumb. See my jsFiddle. The reason why your solution did not work is that you have set draggable via jsPlumb, not jQuery. They do not know about it other, so can not work together. You need to provide options to draggable function:

jsPlumb_instance.draggable(element, { containment:true });

To know more about draggable in jsPlumb see help. You can set containment container explicitly when you get instance of jsPlumb:

var jsPlumb_instance = jsPlumb.getInstance({ Container:"inner" });

You can also specify DragOptions and DropOptions if you need (more info).

It is better to set draggable via jsPlumb, as a plus, then no need to call repaint after dragging is finished. A huge performance benefit with a lot of elements.

A common feature of interfaces using jsPlumb is that the elements are draggable. You should use the draggable method on a jsPlumbInstance to configure this:
myInstanceOfJsPlumb.draggable("elementId");
...because if you don't, jsPlumb won't know that an element has been dragged, and it won't repaint the element.

score 2 · Accepted Answer · answered Jul 13 '16 at 00:47

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.

Set Container Element of a jsPlumb Line

3 Answers3