Question

我们有一个带有可拖动对象的数据表我们使用左侧框架布局，LEFT和CONTENT 我们希望这些部分可以恢复，所以我们尝试使用p：layoutunit和pe：layoutPane
在这两种情况下，当我们将CONTENT容器外部的对象拖到LEFT中时，图像消失，用大的“加号”代替

我们如何始终保持图像可见？编辑：为了简化我们创建单个页面：使用您想要的任何内容修改图像，目标是在拖动期间查看图像

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
    <title></title>
    <h:outputStylesheet  library="css" name="style.css"  />
</h:head>
<h:body>
    <!--<p:layout>-->

    <pe:layout fullPage="true" >
        <pe:layoutPane position="center" id="center" > 
            <!--<p:layoutUnit position="center" id="center" >-->

            <p:graphicImage value="../resources/images/inMessage.png" >
                <p:draggable revert="true" helper="clone" 
                             />
            </p:graphicImage>

            <!--</p:layoutUnit>--> 
        </pe:layoutPane>            
        <pe:layoutPane position="west" id="west" >           
            <!--<p:layoutUnit position="west" id="west" >-->           


            <p:panel header="Message" style="font-size: 11px;">
                <p:fieldset id="imgDrop" legend="drop here">
                    <p:outputPanel id="dropArea"></p:outputPanel>
                </p:fieldset>
                <p:droppable for="imgDrop"/>
            </p:panel>

            <!--</p:layoutUnit>--> 
        </pe:layoutPane>
    </pe:layout>
    <!--</p:layout>-->


</h:body>    
</html>

我们已经留下了评论p：layout，只是为了检查这两个方法是否具有相同的行为

Answer 1

为避免堆叠问题，必须将可拖动物体放在面板的同一水平面上。所以解决了添加appendTo的问题感谢Kukeltje让我朝着正确的方向前进

<p:draggable revert="true" helper="clone" appendTo="@(body)" />

Primefaces在不同的<pe：layoutpane>之间拖放图像

1 个答案: