jsf - 在 Primefaces 中的不同布局单元之间拖放-6ren

jsf - 在 Primefaces 中的不同布局单元之间拖放

转载作者：行者123 更新时间：2023-12-01 12:52:52

25

4

我在整页 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;
    }  
}

最佳答案

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

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

我做的第二件事是将我想要拖入和放下的容器的“z-index”属性更改为负值。那为我修好了。

关于jsf - 在 Primefaces 中的不同布局单元之间拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20348499/

25

4

0

文章推荐： java - 更改 Eclipse 中括号布局的设置

文章推荐： java - Eclipse 无法在全新的 Windows 10 上运行

文章推荐： opengl - 具有 float 纹理钳位值的帧缓冲区对象

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

首页

博学

6Ren·AI

商城

jsf - 在 Primefaces 中的不同布局单元之间拖放