Move/drag connector not by endpoints only by connector lines.

[Syed Sadaqat Hussain Bukhari]

Hi,

I have issue, I am not able to pick the desired connection. It always pick the last added connection for drag or move to connect to other nodes.

I have also requirement that customer want to move the connection from connector not from endpoint.

I have posted many time this issue.

Please help me in this regard. Its really urgent.

Thanks,

Sadaqat

[Simon Porritt]

i remember this. we talked about the connectorSelector function. do you have a jsFiddle anywhere where you tried this out?

you can't drag by connector at the moment.  

[Syed Sadaqat Hussain Bukhari]

Thanks for quick reply,

Following is the jsfiddle

http://jsfiddle.net/sadaqatbukhari/z27Lq/

Now i need to select any connection like verb/noun by clicking on connector label or connector and then want to drag/move that connection and want to attached with node 5.

This is your suggested code but I am not able to drag the connection. I am able to select the connection using your code.

var conn = null; jsPlumb.bind("click", function(c) { conn = c; }); jsPlumb.selectEndpoints().each(function(e) { e.connectorSelector = function() { return conn; }; });

Please help me in this regard how to move a selected connection.

Waiting for your response.

Please feel free if you want to ask any question.

Thanks,

Sadaqat

[Simon Porritt]

Thanks....so you want to drag a connection off, say, div 2 and move it to 5? or you want to drag it off div _1_ and move it to 5?

[Syed Sadaqat Hussain Bukhari]

Thanks,

Sorry I have missed this point, actually I want to move the parent div "1" connection which is having 3 connections.

I want to move from div 1 end point to attached with div 5.

But first I need to select connection like noun, verb or aj.

Thanks,

Sadaqat

[Syed Sadaqat Hussain Bukhari]

Hi,

Any update on topic,

waiting for your reply.

[Syed Sadaqat Hussain Bukhari]

Hi,

Can you please explain how to pick/select an endpoint by clicking a connection.

Is there way to pick an endpoint.

I want to repaint the connector by my self and also try to give visual effects to connector just by updating its svg.

Please help me this way.

I have also provided the jsFiddle but no response at all.

Waiting for your reply.

Thanks,

Sadaqat

On Tuesday, December 31, 2013 1:48:58 PM UTC+5, simon....@gmail.com wrote:

[Syed Sadaqat Hussain Bukhari]

Hi,

I have solved the problem by using the following code.

 jsPlumb.bind("click", function (c) {

           

            $('._jsPlumb_endpoint').css('z-index', '');

            $(c.endpoints[0].canvas).css('z-index', '19');

        });

[milind poundrik]

 

Hello Syed Sadaqat Hussain Bukhari

 

I am trying to establish connection between two HTML elements (DIV tag) using Drag and drop connection feature of jsPlumb. I am able to establish connection using Programmatic Connection but Not by using Drag & Drop connection feature.

Here is the sample code which i am using it.

function onLoadDesignMode()
{
jsPlumb.bind('ready', function () {

jsPlumb.Defaults.Container = $("#Page");

var exampleGreyEndpointOptions = {
endpoint:"Dot",
paintStyle:{ width:25, height:21, fillStyle:'#00ff00' },
isSource:true,
connectorStyle : { strokeStyle:"#ff00ff" },
isTarget:true
};

 

Could you please help me out. I am in little trouble.

[milind poundrik]

 

Hello Syed Sadaqat Hussain Bukhari

 

I am trying to establish connection between two HTML elements (DIV tag) using Drag and drop connection feature of jsPlumb. I am able to establish connection using Programmatic Connection but Not by using Drag & Drop connection feature.

Here is the sample code which i am using it.

function onLoadDesignMode()
{
jsPlumb.bind('ready', function () {

jsPlumb.Defaults.Container = $("#Page");

var exampleGreyEndpointOptions = {
endpoint:"Dot",
paintStyle:{ width:25, height:21, fillStyle:'#00ff00' },
isSource:true,
connectorStyle : { strokeStyle:"#ff00ff" },
isTarget:true
};

jsPlumb.addEndpoint('rect001', {anchor:"BottomCenter" }, exampleGreyEndpointOptions);
jsPlumb.addEndpoint('rect002', {anchor:"TopCenter" }, exampleGreyEndpointOptions);

});
}

By using above code, I am only able to establish End Points but not able to establish connection using Drag & Drop connection feature.

Note: I am using following version of jsPlumb: jquery.jsPlumb-1.5.5.js

I would really appriciate your helping hand.

Thnaks and Regards,
Milind