javascript - 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/

再次编辑

从文档中显示以下内容

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

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

};

这就是我在 jsfiddle 上所做的事情。

谢谢， 詹姆斯

Answer 1

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

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

http://touchpunch.furf.com/

更新

创建端点或将某些元素设置为源和目标后，下一步是将它们连接起来以显示连接。当然，如果唯一的目标只是连接，那么您可以跳过创建端点/源/目标并直接使用

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

DOCS

目前，您正在尝试将相同的元素 .item 设为源元素和目标元素。 此外，您尝试在每次点击(事件)时使相同的元素成为源和目标。为什么要重复呢？

APIDOCS

我猜您的需求和代码的内容有些混淆。