2

に表示される画像のリストにドラッグアンドドロップ機能を実装しています<p:dataTable>。この機能は正常に動作し、ajax 呼び出しも行われています。

唯一の問題は、画像が dataTable からドラッグされるときに、画像が他の html コンポーネントの上にドラッグされていることを示していないことです...つまり、他の html コンポーネントの後ろに隠れてしまいます。私overflow:visibleも自分の dataTable と他のコンポーネントを試してみましたが、まだ運がありません。

ページにあったレイアウトも削除しました。まだ運がありません。これは何か関係があり<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() があります。

$(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

z-indexオンに設定しようとしました<p:draggable>か？

たとえば、 をzindex="10000"高く設定してみてくださいz-index。それがうまくいけば、1000 または 100 を試すことができます。

于 2012-08-29T13:38:59.183 に答える