草庐IT

关于拖放：在 jsPlumb jQuery 中以编程方式”拾取”元素之间的连接

codeneng 2023-03-28 原文

Programatically "picking up" connections between elements in jsPlumb jQuery

当使用 jsPlumb 连接元素时，我觉得缺少一个相当重要的功能和用例：

例如在鼠标按下时，从其中一个端点释放连接器并使其被拖动并能够重新应用到端点或目标的能力。在使用流程图连接器或连接器共享端点的一般情况下，用户如何决定移动哪个连接器？你总是拿起最上面的一个，或者按顺序指定的一个。

我的意思是在动态图表用户界面中的用例，最终用户将在元素之间从端点拖放到端点的连接。如果多个连接器共享一个端点，则用户无法选择移动哪个连接器。

为了解决这个问题，我想让连接器可以通过端点以外的任何东西拖动，从而使其从目标端点释放并被用户拖动。

示例：http://jsplumbtoolkit.com/jquery/flowchartConnectorsDemo.html
尝试将几个"拖动"端点拖动到"放下"端点。如果您现在单击并拖动"drop"端点，您将拾取一个预定的连接器(可能不是您想要的)。是否可以改为通过拖动连接器的中间(黄线上的任何位置)来拾取它？

问题：
当实际上用户单击并拖动连接器时，您如何"欺骗" jsPlumb 有人单击并拖动端点？

注意：我不想删除连接。我知道如何编程。我想触发一个连接器被它的端点拾取和拖动，而不是直接单击端点。

我看到你的问题很老了，但我解决了它

您需要做的就是在 endpoint.canvas 元素上触发 mousedown 事件，这将启动连接器拖动。

当然，开始拖动鼠标不会在同一个位置，并且直到 mousemove 事件才真正开始拖动，所以我在 document.mousemove 上添加了一点厚颜无耻的调整。可能有更好的方法可以做到这一点，但这对其他人来说可能是一个很好的起点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function() {


jsPlumb.ready(function() {
   var jsp = jsPlumb.getInstance();
    jsp.draggable($("#start"));
    jsp.draggable($("#end"));

    var endpoint = jsp.addEndpoint($("#start"), {
        isSource:true
    });

    jsp.addEndpoint($("#end"), {
        isTarget:true
    });

    $("#dragbutton").bind("mousedown", function(e) {

        $(document).bind("mousemove.adjust", function(e) {

            var left = e.offsetX;
            var top = e.offsetY;
            $(endpoint.canvas).css({"left":left,"top":top});
            $(document).unbind("mousemove.adjust");
        });

        $(endpoint.canvas).trigger(e)
    })


})

})

http://jsfiddle.net/VvKZ6/14/

  • 你好！我还在这里，并且仍然对解决此问题的任何解决方案感兴趣。我对你的小提琴很感兴趣，我设法让它几乎完全按照我的用例做，我必须在实际代码中实际测试它，然后才能接受答案。我会尽快(一周内) jsfiddle.net/atQWn/2 在这个小提琴中，您可以单击并拖动整个连接以将其分离并最终将其重新连接到其他东西。可以开发为允许基于坐标分离目标/源。

拾取8221nbspbrsectionconnectordrag-and-dropendpointjqueryjsplumb

有关关于拖放：在 jsPlumb jQuery 中以编程方式”拾取”元素之间的连接的更多相关文章

  1. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  2. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  3. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  4. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  5. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  6. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识

  7. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  8. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年

  9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  10. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

随机推荐