-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
I marked a text on my page and drop this with the mouse to an existing textbox on the same page.
The textbox is marked as "instant" (globalSearch.setInstant(true);
)
Which event is called when this action happened?
The ON_CHANGE
or ON_CHANGING
is not called!
(globalSearch.addEventListener(Events.ON_CHANGE, ....
)
Tested with Zkoss 7.0.4.
Thanks.
Just because you are droping something on a textbox it doesn't mean that the value of the input must be changed also. I think that you have to listen for the onDrop event and then change the value of the target component accordingly.
The "instant" attribute is irrelevant. It can be used if you want to update the model while the user types the value key-by-key.
Hope that helps
Costas
A component should be 'droppable' to be able to receive onDrop events. The problem is that the textbox does not support directly this functionality. So, you have to wrap the textbox inside another droppable component like a Panel (Listbox, Grid and most other container components support this feature).
Here is a working example:
<?page title="Drop Test" contentType="text/html;charset=UTF-8"?>
<zk>
<vlayout>
<label draggable="true" style="cursor: pointer;">Drag me into the textbox </label>
<panel onDrop="dropped(event.dragged)" droppable="true" width="50%" border="normal">
<panelchildren>
<div align="center">
<textbox id="globalSearch" width="100%" placeholder="drag here your question" />
</div>
</panelchildren>
</panel>
</vlayout>
<zscript><![CDATA[
public void dropped(Component dragged) {
if (dragged instanceof Label)
globalSearch.setValue( ((Label)dragged).getValue() );
}
]]></zscript>
</zk>
Hope that helps
Costas
Well, here is a workaround to listen the onDrop event using a little javascript. The difference with the previous sample is that you may drag n drop any text from any web page:
<zk>
<textbox id="searchBox" />
<script type="text/javascript">
zk.afterMount(function() {
$('$searchBox').bind('drop', function (e) {
var searchValue = e.originalEvent.dataTransfer.getData('Text');
alert(searchValue);
});
});
</script>
</zk>
As you see, the dropped text is stored into a javascript variable which then you can send it back to the server to do whatever you want.
Costas
Asked: 2015-02-05 10:11:42 +0800
Seen: 33 times
Last updated: Feb 06 '15
Hi,
thanks for your answer. But the
ON_DROP
- event is not called.If I change the focus to the textbox, no event is called at all. When I then pressed ok, the value of the textbox in my
ON_OK
- Event is correct. (The dragged input.)Christi
cka ( 2015-02-05 11:24:46 +0800 )editPlease post a small not working sample and we will be glad to help
cyiannoulis ( 2015-02-05 11:32:58 +0800 )edit<zk> <label>text to copy</label> <textbox instant="true" onChange='alert("onChange "+self.getValue());' onChanging='alert("onChanging "+self.getValue());' onDrop='alert("onDrop "+self.getValue());' id="globalSearch" /> </zk>
cka ( 2015-02-05 13:37:38 +0800 )editThanks for your answer. This is an interesting example for dragging componts. But it is not the feature I want. I want to paste a text (not a component) into a textbox, like I do with ctrl-c ctrl-v. But with the mouse,
cka ( 2015-02-06 08:56:45 +0800 )editThe content of the textbox changes in my example, but the onchange or onchanging event is not called, Then it may be a bug.
cka ( 2015-02-06 09:00:11 +0800 )edit