Primefaces 在不同的 <pe:layoutPane /> 之间拖放图像答案

【问题标题】：Primefaces drag and drop image between different <pe:layoutPane />Primefaces 在不同的 <pe:layoutPane /> 之间拖放图像
【发布时间】：2017-02-01 18:18:06
【问题描述】：

我们有一个带有可拖动对象的数据表。
我们正在使用两侧框架布局，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 只是为了检查这两个方法是否具有相同的行为

【问题讨论】：

minimal reproducible example 请...数据表相关吗？那个树？您使用模板的事实？请简化但确保它是minimal reproducible example
可拖动对象在数据表中：我不确定是否“如此相关”，但可能是。问题是我不知道为什么图标消失了，这就是我离开数据表的原因，只有几列
树是放置的目标，这就是为什么我只留下一个节点。模板的存在是出于同样的原因：我不知道是哪个部分造成了问题。无论如何，为了收到您的建议，我将尝试简化配置，以了解是否可以排除这些部分：我很快就会回来更新，谢谢
@kukeltje：你是对的。它不依赖于其他元素：知道您可以看到一个非常简单的示例来重现问题。欢迎任何建议
这并不是我说的“正确”，可能是某些部分与问题有关。但是现在您的问题是“简单的”/几乎是minimal reproducible example，stackoverflow.com/questions/32879983/… 或stackoverflow.com/questions/20348499/… 是否包含您问题的答案？（通过google.com/search?q=primefaces+drag+layou找到）

标签： jsf primefaces

【解决方案1】：

为避免堆叠问题，必须将可拖动对象置于面板的同一级别。所以解决了添加 appendTo body 感谢 Kukeltje 让我朝着正确的方向前进

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

【讨论】：

谢谢，在正文中 ;-)