Feature Request: Support devices with touch interface

[GoogleCodeExporter]

Required new approach for connection dots on devices with touch interface

Original issue reported on code.google.com by pnzh...@gmail.com on 11 Mar 2012 at 8:06

[GoogleCodeExporter]

This issue came about as a result of a discussion between Pavel and myself 
about adding support for draggable connections on touch devices - for a few 
reasons, I think perhaps that clicking and dragging is not the best paradigm on 
touch devices.  Here's a snippet from our exchange:

---

I am keen for jsPlumb to support touch devices but I'm not sure that
drag and drop is actually the right mechanism to use for establishing
a connection on a touch device.  It's really hard to drag new
connections for two reasons: firstly, your finger tip is much larger
than the UI component you're trying to drag, and secondly, once
dragging, you can't see what it is that you're dragging and
consequently cannot see when it is over a drop target.

I've been thinking that a better paradigm for touch devices would be
that you first tap an endpoint to put it into "connect" mode, and then
tap some other endpoint to establish a connection to it. Tapping the
source endpoint again without establishing a connection would cancel
"connect" mode (as would tapping anywhere else in the UI).

---

it would be interesting to hear what other people think of this approach.

Original comment by simon.po...@gmail.com on 11 Mar 2012 at 8:25

[GoogleCodeExporter]

That sounds like a good approach

Original comment by harman.p...@googlemail.com on 11 Mar 2012 at 9:56

[GoogleCodeExporter]

yes, that sounds like a good approach.  i agree with you -- dragging the 
source/target containers to arrange them works great on a touch device, but the 
connections are tricky to make.  i'm actually kludging something like your 
proposal in the mean-time (clicking a button within a source div to enter a 
"connect mode" rather than a jsplumb andpoint), but an official feature would 
be great!

Original comment by dshut...@gmail.com on 30 Mar 2012 at 10:15

[GoogleCodeExporter]

(the option of) being able to tap the larger, parent container of an endpoint, 
rather than nailing the endpoint perfectly, to make the connection, would be 
good, possibly less frustrating in usage (if one kept "missing" their intended 
endpoint, they might cry).

Original comment by dshut...@gmail.com on 30 Mar 2012 at 10:23

[GoogleCodeExporter]

what if there was more than one endpoint on an element though? i think that 
you'll just have to make the endpoints large enough to ensure people manage to 
hit the endpoint first time...

this does bring up an interesting question though, one that i've been wondering 
about a little recently.  in this case, maybe you want big fat endpoints on 
mobile devices but smaller ones on a laptop.  do you want to have to make that 
decision yourself in code, or would it be nicer to have a declarative means to 
achieve it?  

Original comment by simon.po...@gmail.com on 31 Mar 2012 at 6:28

[GoogleCodeExporter]

Original comment by simon.po...@gmail.com on 24 Jul 2012 at 11:54

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

for jQuery you can use this:

http://touchpunch.furf.com/

and apparently jQuery UI 1.9 will have built in support.

Original comment by simon.po...@gmail.com on 15 Aug 2012 at 6:31

[GoogleCodeExporter]

i'm closing this out. i have decided not to do the feature i discussed above. 
after seeing drag and drop connections working with the touch punch plugin i 
don't think this is necessary.

Original comment by simon.po...@gmail.com on 15 Aug 2012 at 10:49

• Changed state: WontFix

[GoogleCodeExporter]

Simon, could you post an example of drag and drop connections working with the 
touch punch plugin? I am currently trying to get drag and drop connections 
working on a mobile phone with jsPlumb, so this would be really helpful. Thanks!

Original comment by culurien...@gmail.com on 14 Feb 2014 at 2:52

[GoogleCodeExporter]

google code is not used for issues anymore. 

the flowchart demo shows this working

http://jsplumbtoolkit.com/demo/flowchart/jquery.html

Original comment by simon.po...@gmail.com on 14 Feb 2014 at 2:54