How to catch onDragOver event when dragging simple text

asked 2016-01-18 14:03:18 +0800

coleriv gravatar image coleriv
37 2

Hello everybody, I've implemented a clipboard on a sliding panel. This clipboard shall be used as a container of dropped text. Text can be dragged selecting from everywhere in the browser page (not outside).

Currently, to drop text in my clipboard implementation you have to:

  1. click the tab
  2. select text inside page
  3. drag this text on the panel
  4. drop the text

First problem: often the user first select the text and then tries to drop it in the clipboard (and he/she can't). Moreover, because clipboard must be opened before text selection, what if the text to be selected is under the clipboard?

So the idea is to have the panel sliding down when the dragged text enters over the panel tab, but nothing I've done is working: I can't capture the onDragOver event.

Any suggestion will be greatly appreciated!

Tech note. I'm using ZK 7.0.6; scripting inside zul must be disabled; browser is Firefox 43.0.4

Zul page:

<?xml version="1.0" encoding="UTF-8"?>
<?link rel="stylesheet" type="text/css" href="styles.css"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('my.test.TextDragNDropVM')"
        title="Sliding overlapped Panel"
        <textbox rows="2" width="100%" readonly="true"
            value="How to get an animated panel with JQ" />
        <separator />
        <groupbox width="70%" height="350px"
            sclass="animated-panel-container" xmlns:w="client">
            <div width="300px" height="30px"
                sclass="animated-panel-layer" align="center">
                <vlayout id="clipboard" width="300px" height="150px"
                    spacing="0" sclass="animated-panel">
                    <div align="right" style="padding-right: 5px">
                            onClick="@command('doClearClipboard')" />
                    <textbox width="100%" multiline="true" rows="7"
                        style="border: none" value="@bind(vm.clipboardText)"
                <vlayout id="panelTab" width="100px" height="30px"
                    spacing="0" sclass="animated-panel-tab"
                    <label value="Clipboard" />
            <div width="70%" height="100%" style="float: left">
                <tabbox vflex="1">
                        <tab label="Panel 1" />
                        <tab label="Panel 2" />
                            <label value="@init(vm.text1)" />
                            <label value="@init(vm.text2)" />
            <div width="30%" height="100%" style="float: left">
                <button style="margin: 32px 0px 0px 5px"
                    label="Save clipboard content" onClick="@command('doSave')" />
                <groupbox vflex="1" style="margin: 5px 0px 0px 5px">
                    <caption>Saved text from clipboard</caption>
                    <textbox hflex="1" vflex="1" disabled="true"
                        multiline="true" style="border: none"
                        value="@load(vm.savedClipboardText)" />

View model:

package my.test;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;

public class TextDragNDropVM {

    private String clipboardText;
    private String savedClipboardText;

    public void doClearClipboard() {
        clipboardText = "";

    public void doFormatText() {
        clipboardText = clipboardText.trim() + "\n";

    public void doRegisterListener(
            @ContextParam(ContextType.VIEW) Component view) {
        Component c = view.getFellow("panelTab");
        // c.setWidgetListener("onDragOver", "event.domEvent.preventDefault()");
        c.setWidgetListener("onDragOver", "alert('pippo')");

    public void doSave() {
        if (savedClipboardText.isEmpty()) {
            savedClipboardText = clipboardText.trim();
        } else {
            savedClipboardText += "\n\n" + clipboardText.trim();

    public String getClipboardText() {
        return clipboardText;

    public String getSavedClipboardText() {
        return savedClipboardText;

    public String getText1() {
        return new String(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut leo ex. Duis pharetra tincidunt sodales. Sed ac consectetur leo, non accumsan neque. Vivamus convallis nibh eu porta sodales. Proin convallis, turpis sit amet bibendum varius, felis magna fringilla nisl, vitae fermentum massa ipsum ultrices neque. Sed vitae leo venenatis, laoreet erat id, semper purus. Cras facilisis eget ligula nec laoreet. Fusce viverra placerat neque vitae elementum. Nunc pretium iaculis mi. Curabitur neque odio, aliquam id felis at, semper ornare dolor. Vivamus laoreet ex nec ipsum blandit, ac porta risus aliquam. Integer tempor nec enim eu rutrum. Phasellus sagittis justo.");

    public String getText2() {
        return new String(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu placerat massa. Quisque ultrices enim id enim elementum dictum et ac turpis. Pellentesque nec tincidunt lacus, et dignissim lorem. Pellentesque convallis libero a ligula volutpat luctus. Proin tempor nunc nisi, sit amet imperdiet sapien consectetur sit amet. Quisque et urna dictum leo porttitor condimentum. Fusce sit amet ipsum nec libero egestas ornare eget vitae mauris. Pellentesque imperdiet id ipsum blandit.");

    public void init() {
        clipboardText = "";
        savedClipboardText = "";

    public void setClipboardText(String clipboardText) {
        this.clipboardText = clipboardText;


body {
    padding: 0;

.column-with-dimage div.z-column-cnt {
    padding: 3px 4px;

.column-with-dimage span.z-label {
    font-weight: bold;

.column-with-dimage img {
    height: 24px;
    width: 24px;
    padding: 0 10px;
    cursor: pointer;

.z-cell span.z-label {
    color: #636363;

.animated-panel {
    background-color: #FFFFFF;
    border: 1px solid #CFCFCF;
    display: none;

.animated-panel-container {
    position: relative;

.animated-panel-layer {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;

.animated-panel-tab {
    background-color: #F2F0E3;
    border: 1px solid #CFCFCF;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
delete flag offensive retag 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

1 follower



Asked: 2016-01-18 14:03:18 +0800

Seen: 7 times

Last updated: Jan 18 '16

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