primefaces-可拖动来源 <p:dataTable> 有效但不可见

Question

我正在为<p:dataTable>中显示的图像列表实现拖放功能。 该功能运行良好，并且也进行了ajax调用。

唯一的问题是，当从dataTable中拖动图像时，它没有显示图像被拖动到其他html组件上...即，它隐藏在其他html组件后面。 我尝试了overflow:visible我的dataTable和其他组件也overflow:visible ，但是还没有运气。

我什至删除了页面中的布局。 仍然没有运气。 这和<p:dataTable>什么关系吗？

使用Primefaces 3.3.1

jsf页面代码：

<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:ui="http://java.sun.com/jsf/facelets" 
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Img</title>
</h:head>

<h:body>




    <h:form>

        <p:scrollPanel>
            <p:layout fullPage="true" >

                <p:layoutUnit position="north" minSize="100">

                </p:layoutUnit>

                <p:layoutUnit position="west" maxSize="200" minSize="200">

                    <p:dataTable var="img"
                                 value="#{orderBean.userMedia.mediaList}"
                                 id="dataTableID">
                        <p:column>

                            <p:graphicImage id="imgID" value="#{img.thumbNail.getString('url')}"/>
                            <p:draggable for="imgID" revert="true"/>

                        </p:column>



                    </p:dataTable>

                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <p:outputPanel >

                        <p:panel id="outputPanelID" style="background: red; width: 100%;height: 100%">

                        </p:panel>

                        <p:droppable for="outputPanelID">
                            <p:ajax listener="#{orderBean.onDropImage}"/>
                        </p:droppable> 

                    </p:outputPanel>

                </p:layoutUnit>

                <p:layoutUnit position="south" minSize="60">

                </p:layoutUnit>

            </p:layout>
        </p:scrollPanel>


    </h:form>  

</h:body>

如您在屏幕截图中所见。 图像被拖动，后端侦听器也被调用，但是被拖动的图像位于其他html组件下方。 不知道我在想什么。

谢谢。

屏幕截图： 发生拖动，但在其他html组件下方

Answer 1

我找到了适合我的解决方案。 技巧是在拖动期间在中央布局单元中操纵z索引。
以下代码实现了这一点：

// Enable visibility for drag-and-drop items in Primefaces layout container <p:layoutUnit position="center">
$(".ra-page-pool-items-panel .ui-draggable").draggable({
    start: function() {
        $(".ui-layout-pane-center").each(function(){
            my.centerZIndex = $(this).css("z-index");
            $(this).css({"z-index": 0});
        });
    },

    stop: function() {
        $(".ui-layout-pane-center").each(function(){
            $(this).css({"z-index": my.centerZIndex});
        });
    }
});

所以这一切在一起：jsf（提示：hfx：pageItem是私有组件）：

<h:form id="f">
<p:layout>
    <p:layoutUnit id="west" position="west" size="200" header="PAGE POOL" resizable="true" collapsible="true">
        <t:div styleClass="ra-page-pool-items-panel">
            <t:dataList id="dl" var="ppp" value="#{bean.pagePoolPages}">
                <hfx:pageItem id="ppp" model="#{ppp}" />
                <p:draggable for="ppp" revert="true" zindex="10" />
            </t:dataList>
        </t:div>
    </p:layoutUnit>

    <p:layoutUnit id="center" position="center" header="PAGE LIST">
        <t:div id="itemsPanel" styleClass="ra-page-list-items-panel">
            <t:dataList id="dl" var="plp" value="#{bean.pageListPages}">
                <hfx:pageItem id="plp" model="#{plp}" />
                <p:draggable for="plp" revert="true" zindex="10" />
            </t:dataList>
        </t:div>
    </p:layoutUnit>
</p:layout>

此外，还有一个Javascript WebUI初始化函数WebUIUtils.initWebUI（），该函数在页面init上调用。

$(function(){WebUIUtils.initWebUI();});

var WebUIUtils = {
    centerZIndex: 0,

    initWebUI: function() {
        var my = this;

        // Enable visibility for drag-and-drop items in Primefaces layout container <p:layout>
        $(".ui-layout-unit .ui-layout-unit-content").each(function(){
            $(this).css({background: "red", overflow: "visible"});
        });


        // Enable visibility for drag-and-drop items in Primefaces layout container <p:layoutUnit position="center">
        $(".ra-page-pool-items-panel .ui-draggable").draggable({        // Do it only for the west items draggables
            start: function() {
                $(".ui-layout-pane-center").each(function(){
                    my.centerZIndex = $(this).css("z-index");
                    $(this).css({"z-index": 0});
                });
            },

            stop: function() {
                $(".ui-layout-pane-center").each(function(){
                    $(this).css({"z-index": my.centerZIndex});
                });
            }
        });
    }
};

希望这可以帮助

Answer 2

您是否尝试在<p:draggable>上设置z-index ？

例如，尝试将zindex="10000"为具有较高的z-index 。 如果可行，您可以尝试1000或100。

Answer 3

我正在研究类似的问题。

我还有一个p:layout容器，其中包含两个布局单元，即west和center 。 我在两个容器中都有图像，想要在两个容器之间拖放它们。

现在，我了解了如何使中心的可拖动对象在其容器外部可见。 您必须使用以下命令将溢出设置为在布局单元内容上可见

$(".ui-layout-unit .ui-layout-unit-content ")
.each(function(){
    $(this).css({overflow: "visible"});
});

使它们可见。

但是此方法仅适用于center容器，不适用于west容器。 我尝试找出如何使west可拖动物品在center容器中也可见。

此信息目前可能会有所帮助。

primefaces-可拖动来源 <p:dataTable> 有效但不可见

问题描述

3 个解决方案

解决方案1
1 2012-09-04 08:23:10

解决方案2
0 2012-08-29 13:38:59

解决方案3
0 2012-09-03 15:01:51

primefaces-可拖动来源 <p:dataTable> 有效但不可见

问题描述

3 个解决方案

解决方案1 1 2012-09-04 08:23:10

解决方案2 0 2012-08-29 13:38:59

解决方案3 0 2012-09-03 15:01:51

解决方案1
1 2012-09-04 08:23:10

解决方案2
0 2012-08-29 13:38:59

解决方案3
0 2012-09-03 15:01:51