在原型中的不同布局单元之间拖放 [英] Drag and Drop between different layout units in Primefaces
本文介绍了在原型中的不同布局单元之间拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的代码：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml
xmlns：h =http://java.sun.com/jsf/html
xmlns：f =http://java.sun.com/jsf/core
xmlns：ui =http://java.sun.com/jsf/facelets
xmlns：p = http://primefaces.org/ui >
< f：view contentType =text / html>
< h：head>
< / h：head>
< h：body>
< p：layout fullPage =true>
< p：layoutUnit id =topposition =northheader =menusize =100>
< / p：layoutUnit>
< p：layoutUnit id =bottomposition =southheader =propertiessize =100>
< / p：layoutUnit>
< p：layoutUnit id =leftposition =westheader =toolboxsize =200style =overflow：visible>
< p：outputLabel id =out1value =outputlable/>
< p：draggable for =out1helper =clone/>
< / p：layoutUnit>
< p：layoutUnit id =middleposition =centerheader =sayfa 1>
< p：tabView>
< p：tab id =drop_page_1title =第1页>
< p：panel rendered =＃{empty myBean.components}>
请将任何组件拖到这里。
< / p：panel>
< p：panel id =tab_panelrendered =＃{not empty myBean.components}>
< / p：panel>
< / p：tab>
< p：droppable id =drop_page_1for =page_1>
< p：ajax listener =＃{myBean.f_onCompDrop}/>
< / p：droppable>
< / p：tabView>
< / p：layoutUnit>
< p：droppable for =middle>
< p：ajax listener =＃{myBean.f_onCompDrop}/>
< / p：droppable>
< / p：layout>
< / h：body>
< / f：view>
< / html>
这里我的bean：
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.DragDropEvent;
import java.util.List;
import javax.faces.component.UIComponent;
@ManagedBean（name =myBean）
@SessionScoped
public class NewJSFManagedBean {
private List&UIComponent>组件;
public NewJSFManagedBean（）{
}
public void f_onCompDrop（DragDropEvent ddEvent）{
UIComponent comp = ddEvent.getComponent（）。findComponent（ddEvent.getDragId（））;
components.add（comp）;
}
public List< UIComponent> getComponents（）{
返回组件;
}
public void setComponents（List< UIComponent> components）{
this.components = components;
}
}
解决方案
我的通过添加appendTo =@（body）和zindex =5
可拖动组件看起来像：
$ b在可拖动组件中修复了原理布局之间的拖放问题$ b
< p：draggable for =dragIconrevert =truehelper =cloneappendTo =@（body）zindex =5/>
I have 4 layout units in full-page Primefaces layout. I have outputlabel in west layout unit. I want to drag it and drop it to center layout-unit. The drop area which I want to drop output label to here is a panel in tabView. When I start the dragging outputLabel don't go out from west layout-unit. Also when I drag it to out of west layout-unit it disappears. How can I solve my problem? I've been working on it for 2 days but I haven't succeed.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="top" position="north" header="menu" size="100">
</p:layoutUnit>
<p:layoutUnit id="bottom" position="south" header="properties" size="100">
</p:layoutUnit>
<p:layoutUnit id="left" position="west" header="toolbox" size="200" style="overflow: visible" >
<p:outputLabel id="out1" value="outputlable"/>
<p:draggable for="out1" helper="clone"/>
</p:layoutUnit>
<p:layoutUnit id="middle" position="center" header="sayfa 1" >
<p:tabView>
<p:tab id="drop_page_1" title="Page 1">
<p:panel rendered="#{empty myBean.components}">
Please drag any component to here.
</p:panel>
<p:panel id="tab_panel" rendered="#{not empty myBean.components}">
</p:panel>
</p:tab>
<p:droppable id="drop_page_1" for="page_1" >
<p:ajax listener="#{myBean.f_onCompDrop}" />
</p:droppable>
</p:tabView>
</p:layoutUnit>
<p:droppable for="middle" >
<p:ajax listener="#{myBean.f_onCompDrop}" />
</p:droppable>
</p:layout>
</h:body>
</f:view>
</html>
And here my bean:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.DragDropEvent;
import java.util.List;
import javax.faces.component.UIComponent;
@ManagedBean(name="myBean")
@SessionScoped
public class NewJSFManagedBean {
private List<UIComponent> components;
public NewJSFManagedBean() {
}
public void f_onCompDrop(DragDropEvent ddEvent) {
UIComponent comp = ddEvent.getComponent().findComponent(ddEvent.getDragId());
components.add(comp);
}
public List<UIComponent> getComponents() {
return components;
}
public void setComponents(List<UIComponent> components) {
this.components = components;
}
}
解决方案
My issue with drag and drop between primefaces layouts was fixed in the draggable component, by adding appendTo="@(body)" and zindex="5" Draggable component looks like:
<p:draggable for="dragIcon" revert="true" helper="clone" appendTo="@(body)" zindex="5"/>
这篇关于在原型中的不同布局单元之间拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
