# Drag window that has a toolbarbutton with an 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 retag edit

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.

( 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

( 2013-02-11 14:47:04 +0800 )edit
Be the first one to answer this question!
[hide preview]