Drag and drop of images between layout units in primefaces layout is not working?

问题

we want to implement drag and drop of images from left layout unit on to centre layout unit in Primefaces layout. we tried to add Z index for all layout units as suggested in some stack over flow questions but adding Z index also so couldn't fire on drop event and even scrollable is disabled for all layout units please help so that images can be dragged and dropped on centre layout event listener fires

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 Method

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

回答1:

Change overflow to visible in style

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

来源：https://stackoverflow.com/questions/32879983/drag-and-drop-of-images-between-layout-units-in-primefaces-layout-is-not-working

标签

css

jsf

layout

primefaces

drag-and-drop