Html primefaces-可从<；p:dataTable>；工作但不可见
我正在为显示在Html primefaces-可从<；p:dataTable>；工作但不可见,html,css,jsf,primefaces,draggable,Html,Css,Jsf,Primefaces,Draggable,我正在为显示在中的图像列表实现拖放功能。该特性运行良好，并且正在进行ajax调用 唯一的问题是，当图像从dataTable中拖动时，它不会显示正在其他html组件上拖动的图像…即。它隐藏在其他html组件后面。我也为我的dataTable和其他组件尝试了溢出：visible，但没有成功 我甚至删除了页面中的布局。还是不走运。这与有关吗 使用primefaces 3.3.1 jsf页面代码： <html xmlns="http://www.w3.org/1999/xhtml" xmln
溢出：visible<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>
Img
您是否尝试在
z-index例如，尝试将
zindex=“10000”z索引。如果成功的话，你可以试试1000或100 我正在研究一个类似的问题
我还有一个p:layout
容器，有两个布局单元，west
和center
。我在两个容器中都有图像，希望在两个容器之间拖放它们
现在我了解了如何使中心的拖拽表在容器外部可见。
必须将溢出设置为在布局单元内容上可见
$(".ui-layout-unit .ui-layout-unit-content ")
.each(function(){
$(this).css({overflow: "visible"});
});
使它们可见
但是这种方法只适用于中心
容器，而不适用于西部
容器。我试图找出如何使west
draggables在center
容器中也可见
也许这些信息目前有帮助。我找到了一个适合我的解决方案。
诀窍是在拖动过程中操纵中心布局单元中的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});
});
}
});
//启用Primefaces布局容器中拖放项目的可见性
$（“.ra页面池项目面板.ui draggable”）.draggable({
开始：函数（）{
$（“.ui布局窗格中心”）。每个（函数（）{
my.centerZIndex=$（this.css（“z-index”）；
$（this.css（{“z-index”：0}）；
});
},
停止：函数（）{
$（“.ui布局窗格中心”）。每个（函数（）{
$（this.css（{“z-index”：my.centerZIndex}）；
});
}
});
以下是所有这些：
jsf（提示：hfx:pageItem是一个私有组件）：
此外，还有一个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});
});
}
});
}
};
$（函数（）{WebUIUtils.initWebUI（）；}）；
var WebUIUtils={
centerZIndex:0，
initWebUI:function（）{
var my=这个；
//在Primefaces布局容器中启用拖放项目的可见性
$（“.ui布局单元.ui布局单元内容”）。每个（函数（）{
$（this.css（{背景：“红色”，溢出：“可见”}）；
});
//在Primefaces布局容器中启用拖放项目的可见性
$（“.ra page pool items panel.ui draggable”）.draggable（{//仅对西部项目draggable执行此操作
开始：函数（）{
$（“.ui布局窗格中心”）。每个（函数（）{
my.centerZIndex=$（this.css（“z-index”）；
$（this.css（{“z-index”：0}）；
});
},
停止：函数（）{
$（“.ui布局窗格中心”）。每个（函数（）{
$（this.css（{“z-index”：my.centerZIndex}）；
});
}
});
}
};
希望这有帮助您能发布代码和输出吗？谢谢。我已经编辑并添加了jsf代码和屏幕截图。谢谢@Manfred。我还没有试过你的解决办法，因为要求很紧急。我们已经给出了另一种解决方案。在下一个版本中，它将是拖放。
$(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});
});
}
});
}
};