primefaces-可拖动来源 <p:dataTable> 有效但不可见
[英]primefaces - Draggable from <p:dataTable> works but not visible
问题描述
I am implementing a drag-drop feature for a list of images which are displayed in a <p:dataTable> . 
我正在为<p:dataTable>中显示的图像列表实现拖放功能。 The feature works fine and the ajax calls are being made too. 该功能运行良好，并且也进行了ajax调用。
Only issue is when the image is dragged from the dataTable, it doesn't show the image being dragged over other html components...ie it hides behind other html components. 唯一的问题是，当从dataTable中拖动图像时，它没有显示图像被拖动到其他html组件上...即，它隐藏在其他html组件后面。 I tried the overflow:visible too for my dataTable and other components, but no luck yet. 我尝试了overflow:visible我的dataTable和其他组件也overflow:visible ，但是还没有运气。
I even removed the layouts I had in my page. 我什至删除了页面中的布局。 Still no luck. 仍然没有运气。 Has this anything to do with <p:dataTable> ? 这和<p:dataTable>什么关系吗？
Using primefaces 3.3.1 使用Primefaces 3.3.1
The jsf page code : 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>
As you can see in the screenshot. 如您在屏幕截图中所见。 The image is being dragged and the backend listener is also being called but the image being dragged goes below other html components. 图像被拖动，后端侦听器也被调用，但是被拖动的图像位于其他html组件下方。 Don't know what I am missing. 不知道我在想什么。
Thanks. 谢谢。
The screenshot : 屏幕截图：
3 个解决方案
解决方案1
1 2012-09-04 08:23:10
I found a solution which works for me. 我找到了适合我的解决方案。 The trick is to manipulate the z-index in the center layout unit during dragging. 技巧是在拖动期间在中央布局单元中操纵z索引。
The following code achieves this: 以下代码实现了这一点：
// 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});
});
}
});
So here is all together: The jsf (hint: hfx:pageItem is a private component): 所以这一切在一起：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>
Further there is a Javascript WebUI initialization function WebUIUtils.initWebUI(), which is called on page init. 此外，还有一个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});
});
}
});
}
};
Hope this helps 希望这可以帮助
解决方案2
0 2012-08-29 13:38:59
Did you try to set the z-index on <p:draggable> ? 您是否尝试在<p:draggable>上设置z-index ？
For example, try to set zindex="10000" to have a high z-index . 例如，尝试将zindex="10000"为具有较高的z-index 。 And if that works, you can try 1000 or 100. 如果可行，您可以尝试1000或100。
解决方案3
0 2012-09-03 15:01:51
I'm working on a similar problem. 我正在研究类似的问题。
I also have a p:layout container with two layout units, west and center . 我还有一个p:layout容器，其中包含两个布局单元，即west和center 。 I have images in both containers and want to drag and drop them between both containers. 我在两个容器中都有图像，想要在两个容器之间拖放它们。
Now I found out how to make the draggables in the center visible outside its container. 现在，我了解了如何使中心的可拖动对象在其容器外部可见。 You have to set overflow to visible on the layout unit content with 您必须使用以下命令将溢出设置为在布局单元内容上可见
$(".ui-layout-unit .ui-layout-unit-content ")
.each(function(){
$(this).css({overflow: "visible"});
});
to make them visible. 使它们可见。
But this approach does only fit for the center container and not for the west container. 但是此方法仅适用于center容器，不适用于west容器。 I try to find out how to make the west draggables also visble in center container. 我尝试找出如何使west可拖动物品在center容器中也可见。
Maybe this information helps at the moment. 此信息目前可能会有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.