JsPlumb触摸屏

Question

我有一个使用JsPlumb框架的应用程序。它在桌面上工作得很好，但是当使用触摸设备时，它不能正常工作。

我有一个可以在屏幕周围拖动的对象，这在触摸设备和桌面上都能很好地工作。但是，我还得到了一个操作，当用户单击设备时，它可以设置一个连接器将一条线拖到另一个对象上，以便将它们连接在一起。然而，在触摸设备上，它无法设置连接器。

触摸设备将绘制一个图标，但它将立即显示出来。这是在触摸设备无法分辨拖动/触摸选项之间的区别之前。

我添加了一些代码，看看它是否与我的代码有关。

$("#container").append(state)
jsPlumb.draggable("state" + i);

jsPlumb.makeSource($('.item'), {
   connector: 'StateMachine',
});
jsPlumb.makeTarget($('.item'), {
   anchor: 'Continuous',
   reattach:true,
   isTarget:true,
   beforeDrop:function(params) {
      'Some code'
  }
});

编辑

JSFiddle

http://jsfiddle.net/8jMqG/6/

再编辑

在文档中显示了以下内容

提示:对于公共数据，使用三参数addEndpoint方法--经常发生的一件事是，您有一个端点，其外观和行为在不同元素上的用法基本相同，只是有几个不同之处。

var exampleGreyEndpointOptions = {
   endpoint:"Rectangle",
   paintStyle:{ width:25, height:21, fillStyle:'#666' },
   isSource:true,
   connectorStyle : { strokeStyle:"#666" },
   isTarget:true

}；

这就是我在弹琴上要做的。

谢谢，詹姆斯

Answer 1

我使用jsPlumb已经有一段时间了。我的应用程序既可以在桌面上运行，也可以在手机上运行。当然，点击和触摸是有区别的。

我使用jquery-ui-touchpunch来支持移动设备；单击、拖动对象/连接&创建连接在移动设备上也很顺利。

http://touchpunch.furf.com/

更新

在创建终结点或使某些元素源&目标之后，下一步是加入它们以使连接出现。当然，如果唯一的目的只是连接，那么您可以跳过创建端点/源/目标&直接使用

jsPlumb.connect({
    source:"element1", 
    target:"element2",
    anchors:["Right", "Left" ],
    endpoint:"Rectangle",
    endpointStyle:{ fillStyle: "yellow" }
});

文档

目前，您正在尝试使相同的元素.item源和目标。此外，您还试图通过每次单击(事件)创建相同的元素源&目标。为什么要重复？

APIDOCS

我想你需要什么和代码说什么有一些混淆。