应用错误收集

在primefaces布局中布局单元之间拖放图像不起作用？

时间：2015-10-01 05:22:36

标签： css jsf layout primefaces drag-and-drop

我们希望在Primefaces布局中实现从左侧布局单元到中心布局单元的图像拖放。我们尝试为所有布局单元添加Z索引，如某些堆栈中的流量问题所示，但添加Z索引也因此无法触发放置事件，甚至对所有布局单元禁用可滚动请帮助以便可以拖动图像并放在中心布局事件监听器触发

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions">
    <f:view contentType="text/html">
    <h:head>

    <style type="text/css">
    .slot {
    background: #FF9900;
    width: 640px;
    height: 200px;
    display: block;
    }
    </style>

    <style type="text/css">
    .ui-layout-north {
    z-index: 20 !important;
    overflow: visible !important;;
    }

    .ui-layout-north .ui-layout-unit-content {
    overflow: visible !important;
    }
    </style>
    </h:head>
    <h:body>
    <p:layout fullPage="true">
    <p:layoutUnit id="top" position="north" size="50">
    <p:menubar>
    <p:submenu label="New Fundament" icon="ui-icon-document">
    <p:submenu label="Basic Layout" icon="ui-icon-contact">
    <p:menuitem value="Choose Rows" url="#" />
    </p:submenu>
    </p:submenu>
    <p:submenu label="Edit Existing Fundament" icon="ui-icon-pencil">
    </p:submenu>
    <p:submenu label="Save" icon="ui-icon-disk">
    </p:submenu>
    </p:menubar>
    </p:layoutUnit>
    <p:layoutUnit id="left" position="west" size="300" resizable="true"
    collapsible="true" header="Items" minSize="200">
    <h:graphicImage id="campnou" value="images/correct_scrum_board.png">
    </h:graphicImage>
    <p:draggable for="campnou" helper="clone" />
    </p:layoutUnit>
    <p:layoutUnit id="right" position="east" size="250"
    header="Tree Structure" resizable="true" closable="true"
    collapsible="true" style="text-align:center">
    <p:lightBox style="text-align:center;margin-top:20px;">
    </p:lightBox>
    </p:layoutUnit>
    <p:layoutUnit id="center" position="center">
    <p:outputPanel id="slot" styleClass="slot" />
    <p:droppable for="slot">
    <p:ajax listener="#{scrumBoardBean.onDrop}" />
    </p:droppable>

    </p:layoutUnit>
    </p:layout>
    </h:body>
    </f:view>
    </html>

Bean方法

public void onDrop(DragDropEvent ddEvent)
 {
     //Logic
    }

1 个答案:

答案 0 :(得分：1)

将溢出更改为可见的样式

<h:head>
        <style type="text/css">
.ui-widget {
    font-size: 75%;
}

.ui-layout-west {
    z-index: 20 !important;
    overflow: visible;
}

.ui-layout-west .ui-layout-unit-content {
    overflow: visible;
}
</style>
    </h:head>