Iframe drop problem

asked 2021-06-02 11:38:38 +0800

Resull gravatar image Resull
3 1

updated 2021-06-10 14:05:58 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team


When I drag an item over the iframe, it is strange that I release the mouse but it is not released. The item stays over the iframe and will not disappear. At this time, when I move the mouse out of the iframe, I can drag without holding down the mouse.

Here's my zul and controller:

<zk xmlns:n="native">
    <window hflex="1" vflex="1" apply="org.example.MyController">
        <iframe vflex="1" hflex="1" id="iframe" src="iframe.zul"/>
          <image height="150px" width="150px" src="/img/picture1.jpg" id="image"/>

public class MyController extends SelectorComposer<Component> {

    private Iframe iframe;
    private Image image;

    public void doAfterCompose(Component component) throws Exception {
        iframe = (Iframe) component.getFellow("iframe");
        image = (Image) component.getFellow("image");

Here's my iframe.zul and iframeController:

    <div hflex="1" vflex="1" apply="org.example.IframeController" id="iframe_div">
        Just throw in!

public class IframeController extends SelectorComposer<Component> implements EventListener<Event> {

    private Div div;

    public void doAfterCompose(Component comp) throws Exception {
        div = (Div) comp.getFellow("iframe_div");
        div.addEventListener(Events.ON_DROP, this);

    public void onEvent(Event event) throws Exception {
        if (event.getName().equals(Events.ON_DROP)) {

By the way, I'm from China. I speak through translation software, so my expression is not very good. Please forgive me.Anyway,thank your for help!

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2021-06-10 13:04:51 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

Hey there.

Here's a sample of manually rewriting events:


This is the best you can hope to achieve with iframes. (won't work in fiddle cause cross-site origin, cause iframes :D, you need to open the page in a new window by clicking on the new window button located near the close button when you run the sample)

what it does is it wires events listeners to the iframe inner document, repeat these events to the main window. This enable the iframe itself to be a valid target for the drop event (not the components located inside of the iframes, but the frame itself).

Anything more complicated than that would require manual capture and redirection of the events, which is just not a good idea to begin with.

With this said, I want to be very clear about the use case:

Depending on how many of your business screens already implemented with iframes, I'd recommend you still consider just rewriting them by creating components in the same page if you plan on having any interaction between the two contents at all. (using Apply, include, Executions.createComponents)

I understand this might be a big task, but you are using the wrong tool for the job you are trying to accomplish. This will hurt you more and more if you want to implement other interactions between the frames.

Iframes are meant to separate the pages, and allow them to be totally independent from eachother.

If you want interaction, and the pages are located on the same server, it's just the worst possible choice for templating.

link publish delete flag offensive edit

answered 2021-06-03 15:12:48 +0800

MDuchemin gravatar image MDuchemin
2146 1 5
ZK Team

updated 2021-06-03 15:16:30 +0800

Hey there Resull, Here's a few pointers on your situation:

I see that you are using iframes in this situation. Usually, IFrames are reserved for communication between two different websites, or if you are trying to make the out and in pages strongly separated.

It would be possible in theory to write a custom event handler on the iframe, do the cross-site wiring, etc. but that would be A LOT of work.

Is that what you want to do in this case?

If you are only using this structure to include a part of the code from a different file, there is better options for this, which allow you to maintain a single page. Here's an example using the apply component (from ZK EE package): https://zkfiddle.org/sample/venmgl/3-drag-and-drop-frame

But there are also other options. You could use:


There are other options, such as template design. Those really depends on your requirements.

link publish delete flag offensive edit


Some side notes on the samples: Using SelectorComposer, you can use the @Wire annotation to automatically retrieve your components. You also NEED to keep the super.afterCompose when you override this method (otherwise, the composer will not auto-wire).

MDuchemin ( 2021-06-03 15:13:07 +0800 )edit

I'd also recommend either creating event listeners as members of your composer class (if you reuse them), or as an anonymous instance of EventListener directly (see my fiddle). Having the same class be both the composer and the event listener will severely limit what you can listen to.

MDuchemin ( 2021-06-03 15:16:04 +0800 )edit

answered 2021-06-03 17:43:54 +0800

Resull gravatar image Resull
3 1

Hello MDuchemin, thank you for your reply!

  1. As for the code I posted, I built a demo instead of my project code. I'm used to building a small project to simplify and highlight problems. Thank you for your code style suggestions.

  2. You mentioned the use of "apply", "execution.Createcomponents" and "include". After my trial, this is really feasible, but I have used iframe to build complex business code in the original project, so it may not be a good idea to change components.

  3. By comparison, I'd like to know how to write a custom event handler. Now the problem is that when I drag a component into the iframe, the mouseup event doesn't work. I want to know more about the custom way of drag and drop to help me finish my work.

Thanks again!

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2021-06-02 11:38:38 +0800

Seen: 14 times

Last updated: Jun 10 '21

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More