Faites glisser et déposez l'intérieur d'un modalPanel

En utilisant Richfaces 3.3.0GA, jsf 1.2_14 et facelets.Faites glisser et déposez l'intérieur d'un modalPanel

J'ai un RichFaces ModalPanel avec une image à l'intérieur comme suit:

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

Je veux que l'image soit zoomable (fonctions où l'agrandir() et diminution()) et dragable. Ce code fonctionne partiellement. Si vous DND avant de zoomer, il fonctionne correctement, mais après cela, il cesse de fonctionner. Au fait, je ne peux pas voir un aperçu du glisser. Je voudrais mettre en application le même DND que le titre du modalPanel utilise (qui donne l'impression de déplacer une vraie fenêtre, vous voyez le contenu de la fenêtre bouger pendant que vous faites glisser).

Comment puis-je l'atteindre?

Source

2010-03-11 pakore

Je ne pouvais pas le faire fonctionner avec richfaces modalPanel mais je pouvais le faire fonctionner avec la boîte de dialogue primefaces, qui est assez similaire. Voici la solution:

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

Source

2010-03-11 15:36:21 pakore

Faites glisser et déposez l'intérieur d'un modalPanel

Répondre

Questions connexes