在 Primefaces 中的不同布局单元之间拖放答案

【问题标题】：Drag and Drop between different layout units in Primefaces在 Primefaces 中的不同布局单元之间拖放
【发布时间】：2013-12-03 10:25:33
【问题描述】：

我在整页 Primefaces 布局中有 4 个布局单元。我在西部布局单元中有输出标签。我想将它拖放到中心布局单元。我想将输出标签放置到此处的放置区域是 tabView 中的一个面板。当我开始拖动 outputLabel 时，不要从西布局单元中退出。此外，当我将它拖出西布局单元时，它也会消失。我该如何解决我的问题？我已经为此工作了 2 天，但我没有成功。

这是我的代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>

        </h:head>

        <h:body>
            <p:layout fullPage="true">

                <p:layoutUnit id="top" position="north" header="menu" size="100">
                </p:layoutUnit>

                <p:layoutUnit id="bottom" position="south" header="properties" size="100">
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" header="toolbox" size="200" style="overflow: visible" >
                    <p:outputLabel id="out1" value="outputlable"/>
                    <p:draggable for="out1" helper="clone"/>
                </p:layoutUnit>

                <p:layoutUnit id="middle" position="center" header="sayfa 1" >
                    <p:tabView>
                        <p:tab id="drop_page_1" title="Page 1">
                            <p:panel rendered="#{empty myBean.components}">
                                Please drag any component to here.
                            </p:panel>
                            <p:panel id="tab_panel" rendered="#{not empty myBean.components}">

                            </p:panel>
                        </p:tab>
                        <p:droppable id="drop_page_1" for="page_1"  >
                            <p:ajax listener="#{myBean.f_onCompDrop}" />
                        </p:droppable>
                    </p:tabView>
                </p:layoutUnit>
                <p:droppable for="middle" >
                    <p:ajax listener="#{myBean.f_onCompDrop}" />
                </p:droppable>
            </p:layout>

        </h:body>
    </f:view>
</html>

这里是我的 bean：

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.DragDropEvent;
import java.util.List;
import javax.faces.component.UIComponent;


@ManagedBean(name="myBean")
@SessionScoped
public class NewJSFManagedBean {

    private List<UIComponent> components;
    public NewJSFManagedBean() {
    }
    public void f_onCompDrop(DragDropEvent ddEvent) {  
        UIComponent comp = ddEvent.getComponent().findComponent(ddEvent.getDragId());
        components.add(comp);  
    }

    public List<UIComponent> getComponents() {
        return components;
    }

    public void setComponents(List<UIComponent> components) {
        this.components = components;
    }  
}

【问题讨论】：

标签： jsf jsf-2 primefaces drag-and-drop draggable

【解决方案1】：

我在 2 个布局单元之间拖动项目时遇到了同样的问题。我通过css完全解决了它。

我通过将“溢出”属性更改为“可见”来更改我想要拖出的容器。

我做的第二件事是将要拖放的容器的“z-index”属性更改为负值。这为我解决了问题。

【讨论】：

终于有人花时间解释他做了什么。我只是在将面板从数据列表拖到字段集中时遇到了同样的问题。应用您的更改，最后面板在拖动时保持可见。谢谢！！

【解决方案2】：

通过添加 appendTo="@(body)" 和 zindex="5" 在可拖动组件中修复了我在 primefaces 布局之间拖放的问题可拖动组件如下所示：

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

【讨论】：