2

我正在为显示在<p:dataTable>. 该功能运行良好，并且 ajax 调用也在进行中。

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

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

使用素面 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 组件下方

4

3 回答 3

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});
                });
            }
        });
    }
};

希望这可以帮助

于 2012-09-04T08:23:10.917 回答
0

我正在研究类似的问题。

我还有一个p:layout带有两个布局单元的容器，west并且center. 我在两个容器中都有图像，并且想在两个容器之间拖放它们。

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

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

使它们可见。

但是这种方法只适用于center容器而不适用于west容器。我试图找出如何使west可拖动对象在center容器中也可见。

也许这些信息目前有帮助。

于 2012-09-03T15:01:51.223 回答
0

您是否尝试设置z-indexon <p:draggable>？

例如，尝试设置zindex="10000"为高z-index。如果可行，您可以尝试 1000 或 100。

于 2012-08-29T13:38:59.183 回答