Question

我正在为<p:dataTable>中显示的图像列表实现拖放功能。该功能工作正常，也正在进行ajax调用。

唯一的问题是当从dataTable拖动图像时，它没有显示被拖动到其他html组件上的图像...即。它隐藏在其他html组件后面。我也为我的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组件。不知道我错过了什么。

感谢。

截图： Drag happens but below the other html components

Answer 1

我找到了一个适合我的解决方案。诀窍是在拖动过程中操纵中心布局单元中的z-index。
以下代码实现了这一目标：

// 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

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

例如，尝试将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>可拖动但无法看见</p：datatable>

3 个答案: