使用Richfaces 3.3.0GA，jsf 1.2_14和facelets。
我有一张Richfaces ModalPanel，里面的图像如下：
<ui:composition>
<a4j:outputPanel id="#{prefix}_a4jImagePanel">
<rich:modalPanel id="#{prefix}_imagePanel" autosized="true" domElementAttachment="body" rendered="#{examinationPanel.render}">
<f:facet name="header">
<h:outputText value="Images from examination" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png" id="#{prefix}_hideimagelink" styleClass="hidelink" />
<rich:componentControl for="#{prefix}_imagePanel" attachTo="#{prefix}_hideimagelink" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<a4j:form>
<h:panelGrid columns="1" id="picture">
<!-- big image here -->
<rich:dragSupport ondragstart="startDrag(event)" ondragend="stopDrag(event)">
<h:graphicImage id="#{prefix}_pic" value="#{examinationPanel.imagePath}" onmousedown="startDrag(event)" onmouseup="stopDrag(event)" /></rich:dragSupport>
<rich:contextMenu event="oncontextmenu" attachTo="#{prefix}_pic" submitMode="none">
<rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/>
<rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/>
</rich:contextMenu>
</h:panelGrid>
</a4j:form>
</rich:modalPanel>
</a4j:outputPanel>
<script type="text/javascript">
//adding the event listerner for Mozilla
if(window.addEventListener)
document.addEventListener('DOMMouseScroll', zoomScroll, false);
//for IE/OPERA etc
document.onmousewheel = zoomScroll;
var startX;
var startY;
function enlarge(){
#{rich:element(fnc:concat(prefix,'_pic'))}.width=#{rich:element(fnc:concat(prefix,'_pic'))}.width*1.25;
}
function decrease(){
#{rich:element(fnc:concat(prefix,'_pic'))}.width=#{rich:element(fnc:concat(prefix,'_pic'))}.width*0.8;
}
function zoomScroll(event){
var delta = 0;
if (!event) event = window.event;
// normalize the delta
if (event.wheelDelta) {
// IE and Opera
delta = event.wheelDelta / 60;
} else if (event.detail) {
// W3C
delta = -event.detail / 2;
}
if(delta>0)enlarge();
else decrease();
}
function startDrag(event){
startX = event.clientX;
startY = event.clientY;
}
function stopDrag(event){
var diff = new ModalPanel.Sizer.Diff();
diff.deltaHeight=0;
diff.deltaWidth=0;
diff.deltaX = -startX+event.clientX;
diff.deltaY = -startY+event.clientY;
#{rich:element(fnc:concat(prefix,'_imagePanel'))}.component.doResizeOrMove(diff);
}
</script>
</ui:composition>
我希望图像是可缩放的（因此可以使用expand（）和reduce（）函数）和可拖动的图像。此代码部分起作用。如果您在缩放前免打扰，则可以正常工作，但此后它将停止工作。顺便说一句，我看不到拖动的预览。我想实现与modalPanel标题使用的相同的DND（这给了移动真实窗口的印象，您看到窗口内容随拖动而移动）。
我该如何实现？
最佳答案
我无法将其与richfaces modalPanel一起使用，但可以将其与primefaces对话框一起使用，这非常相似。解决方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fnc="http://eyeprevent.com/fnc" xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
<script type="text/javascript">
//adding the event listerner for Mozilla
if(window.addEventListener)
document.addEventListener('DOMMouseScroll', zoomScroll, false);
//for IE/OPERA etc
document.onmousewheel = zoomScroll;
var startX;
var startY;
function enlarge(){
#{rich:element('pic')}.width=#{rich:element('pic')}.width*1.25;
}
function decrease(){
#{rich:element('pic')}.width=#{rich:element('pic')}.width*0.8;
}
function zoomScroll(event){
var delta = 0;
if (!event) event = window.event;
// normalize the delta
if (event.wheelDelta) {
// IE and Opera
delta = event.wheelDelta / 60;
} else if (event.detail) {
// W3C
delta = -event.detail / 2;
}
if(delta>0)enlarge();
else decrease();
}
</script>
</head><body>
<p:resources />
<a4j:outputPanel id="a4jImagePanel">
<p:dialog id="imagePanel" widgetVar="dialog">
<p:draggable dragOnly="true" underlay="none"/>
<a4j:form>
<h:panelGrid columns="1" id="picture">
<!-- big image here -->
<h:graphicImage id="pic" value="/images/eye.jpg"></h:graphicImage>
<rich:contextMenu event="oncontextmenu" attachTo="pic" submitMode="none">
<rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/>
<rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/>
</rich:contextMenu>
</h:panelGrid>
</a4j:form>
</p:dialog>
</a4j:outputPanel>
<a href="#" onclick="dialog.show()">Link</a>
</body>
</html>