Перетащите внутрь модальной панели

Question

Использование 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>

Я хочу, чтобы изображение было масштабируемым (отсюда функции увеличения () и уменьшения ()) и перетаскиваемым. Этот код работает частично. Если вы DND до масштабирования, он работает правильно, но после этого он перестает работать. Кстати, я не вижу предварительный просмотр перетаскивания, хотя. Я хотел бы реализовать тот же DND, который использует заголовок modalPanel (который дает впечатление для перемещения реального окна, вы видите, как содержимое окна перемещается при перетаскивании).

Как мне этого добиться?

Answer 1

Я не мог заставить его работать с richfaces modalPanel, но я мог заставить его работать с диалогом простых лиц, который очень похож. Вот решение:

<!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>