是否可以获取 ipywidget 的当前位置？

Question

我正在使用 ipyvuetfy 库，它基于 vuetify.js 库和 ipyvwidgets.

创建漂亮的仪表板元素

我需要将对话框放置在特定位置（在另一个元素的顶部），就像这个菜单放置在 select 文件夹 btn 的顶部。

如何访问小部件相对于 window 的当前位置？

Answer 1

可以使用 Javascript 代码，通过使用自定义 class 识别小部件并使用 jQuery offset() method, and then setting the DOM Style top and left properties of the child (here a Card) of the ipyvuetify Dialog, with the style position set as fixed. I haven't found how to execute the JS code via the Dialog activator slot, so the Dialog widget is triggered via the click.stop 事件：

import ipyvuetify as v
import ipywidgets as w

from IPython.display import Javascript

out = w.Output(layout={'display': 'none'})

js = '''
var x = $(".myparentwidget").offset();
var d = document.getElementsByClassName("mydialog")[0]; 
d.style.top = x.top+"px"; 
d.style.left= x.left+"px";'''

def on_click(widget, event, data):
    dialog.v_model=True
    with out:
        display(Javascript(js, lib="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"))

btn = v.Btn(
    children=["Open dialog"],
    class_='myparentwidget'
)
btn.on_event("click.stop", on_click)

dialog = v.Dialog(
    v_model=False,
    children=[
        v.Card(
            class_='mydialog',
            style_="position: fixed; width: 300px",
            children=[
                v.CardTitle(children=["Dialog window"]),
                v.CardText(children=['Dialog text']),
            ]
        )
    ],
)

v.Layout(children=[btn,dialog,out])

是否可以获取 ipywidget 的当前位置？

Is it possible to get the current position of an ipywidget?

python

ipywidgets

vuetify.js