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

【问题标题】：Drag and drop of images between layout units in primefaces layout is not working?在 primefaces 布局中的布局单元之间拖放图像不起作用？
【发布时间】：2015-10-01 05:22:35
【问题描述】：

我们希望在 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>

豆方法

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

【问题讨论】：

要尝试的 css 属性称为“溢出”。

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

【解决方案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>

【讨论】：