0

Drag and drop in Textbox

asked 2015-02-05 10:11:42 +0800

cka gravatar image cka
3 1

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.

delete flag offensive retag edit

Comments

Hi,

thanks for your answer. But the ON_DROP - event is not called.

 globalSearch.addEventListener(Events.ON_DROP,

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 )edit

Please 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 )edit

Thanks 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 )edit

The 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

4 Answers

Sort by ยป oldest newest most voted
0

answered 2015-02-05 10:24:54 +0800

cyiannoulis gravatar image cyiannoulis
1201 10

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

link publish delete flag offensive edit
0

answered 2015-02-05 17:28:18 +0800

cyiannoulis gravatar image cyiannoulis
1201 10

updated 2015-02-05 17:53:07 +0800

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

link publish delete flag offensive edit
0

answered 2015-02-06 10:17:43 +0800

cyiannoulis gravatar image cyiannoulis
1201 10

updated 2015-02-06 15:15:34 +0800

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

link publish delete flag offensive edit
0

answered 2015-02-06 11:49:08 +0800

liunnek gravatar image liunnek
1

that's helpfull :) thanks

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

Follow
2 followers

RSS

Stats

Asked: 2015-02-05 10:11:42 +0800

Seen: 33 times

Last updated: Feb 06 '15

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