46307

Connecting jQuery UI dialogs with a line using JsPlumb

Question:

I am using jQuery plugin called jsPlumb - <a href="http://jsplumb.org/jquery/demo.html" rel="nofollow">http://jsplumb.org/jquery/demo.html</a> and I want to connect my jQuery UI Dialogs with lines generated by jsPlumb. But I cant figure out way to do it.

I have this source:

<div id="okenko1">Tuhle neco je</div> <div id="okenko2">Tuhle je neco jineho</div>

When I create dialog from this divs with jQuery UI

$("#okenko1").dialog()...

And then I do plumb:

jsPlumb.connect({source: $("#okenko1"), target: $("#okenko2")});

Its bugged :-D Looks like this <a href="http://prntscr.com/2udde" rel="nofollow">http://prntscr.com/2udde</a>

I tried to reverse the process, first plumb em and then use dialog, result is here <a href="http://prntscr.com/2udef" rel="nofollow">http://prntscr.com/2udef</a>:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/4T5yu.png" data-original="https://i.stack.imgur.com/4T5yu.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Next I tried to plumb divs created by UI, it isnt working...

What can I do next? I really need to connect two elements on page with line, that will move when I move one of the elements, but I cant find anything better than jsPlumb.

Answer1:

I have made a small sample in jsfiddle: <a href="http://jsfiddle.net/p8XUm/4/" rel="nofollow">http://jsfiddle.net/p8XUm/4/</a>

html:

<span id="okenko1">Tuhle neco je</span> <span id="okenko2">Tuhle je neco jineho</span>

javascript:

var d = $("#okenko1").dialog({drag: function(event, ui){ jsPlumb.repaint(d); }}).parent('.ui-dialog'); jsPlumb.connect({source: $("#okenko2"), target: d});

you should use the parent dialog element as plumb endpoint, not the div itself. d = $("#okenko1").parent(".ui-dialog")

More info about draggable endpoints can be found in the <a href="http://jsplumb.org/doc/content.html#dragAndDropExamples" rel="nofollow">documentation</a>

update: sample now works when dialog is moved!

Recommend

  • File owner/group 48/48
  • In OnNotify what is the difference between returning TRUE or setting *pResult = TRUE
  • GCC and Clang disagree about C++17 constexpr lambda captures
  • JButton isselected method doesnt work
  • Using different eclipselink than bundled in glassfish-embedded-web
  • filter dates. Cakephp is returning an array instead of a date, is that normal?
  • TASM Print characters of string
  • Update Google AMP cache URL signature verification error
  • GCC baremetal inline-assembly SI register not playing nicely with pointers
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Convert array of 8 bytes to signed long in C++
  • Importing jscolor library in angular 2
  • Release, debug version and Authorization Google?
  • jquery mobile loadPage not working
  • Apache 2.4 - remove | delete | uninstall
  • How to delete a row from a dynamic generate table using jquery?
  • Python: how to group similar lists together in a list of lists?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • Free memory of cv::Mat loaded using FileStorage API
  • Trying to get generic when generic is not available
  • Getting Messege Twice Using IMvxMessenger
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • Bitwise OR returns boolean when one of operands is nil
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?