0

Drag window that has a toolbarbutton with an Image

asked 2013-02-01 20:12:10 +0800

darius gravatar image darius
279 3

We have a page where certain windows can be dragged and dropped onto a panel. It works in Chrome and Safari but not working in IE 9. (This is with ZK 6.0.1 and also with ZK 6.5.1.1)

The Window that is being dragged contains a large Toolbarbutton. This toolbar has a large Image. On our actual site, almost the whole window area is occupied by the Image. I realized that the presence of the image was causing the difference between IE and Chrome/Safari

I have created the following code to demonstrate:

<zk>

<zscript><![CDATA[
void changeTitle(org.zkoss.zul.Panel thePanel)
{
   thePanel.setTitle("Dropped!");
}

   ]]>
    </zscript>  

    <window width="800px" height="800px" border="normal" title="test">
    <grid>
    <rows>
    <row>
    <panel id="panel1" title="PANEL1" droppable="ABC" onDrop="changeTitle(panel1);">
    <panelchildren>
    <window width="200px" height="200px" border="normal" draggable="ABC">
    <toolbarbutton image="/images/xx.png">

    </toolbarbutton>
    </window>
    </panelchildren>
    </panel>

    <panel id="panel2"  title="PANEL2" droppable="ABC" onDrop="changeTitle(panel2);">
    <panelchildren>
    <window width="200px" height="200px" border="normal" draggable="ABC" />
    </panelchildren>
    </panel>
    </row>
    </rows>
    </grid>
    </window>

</zk>

You do not actually need the image file to replicate the problem. Here are the steps.

1. Drag the left-hand-side window from some position NOT on the image, and drop it to the right-hand-side panel

2. This works fine in all browsers. (The RHS panel changes its title to show that it got a drop event)

However,

3. Drag the left-hand-side by starting the drag while over the image, and drop it on the right-hand-side panel

4a. In Chrome/Safari, it still works the same; BUT,

4b. In IE 9, the drop event that is triggered is on the left-hand-side panel! This is the same behavior I see in our full-fledged app...the target of the drag is always the same thing that I am trying to drop!

I'm not sure if this is a ZK issue, or if I should be doing something differently.

Any help is appreciated.

delete flag offensive retag edit

Comments

I already try your code on Windows 7 64bits and IE9, but 4b. happened at random. It almost triggered on right-hand-side and only very few times on left-hand-side.

paowang ( 2013-02-07 03:41:27 +0800 )edit

Thanks for trying it. I created a Bug report, and it has been fixed in the next ZK version. http://tracker.zkoss.org/browse/ZK-1612

darius ( 2013-02-11 14:47:04 +0800 )edit
Be the first one to answer this question!
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

Follow

RSS

Stats

Asked: 2013-02-01 20:12:10 +0800

Seen: 16 times

Last updated: Feb 01 '13

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