2 Replies Latest reply on Nov 18, 2008 3:06 PM by jessica streicher

    how to disable dragging of mediaoutput?

    jessica streicher Newbie

      Hi!

      Im currently trying to build something map-like.

      So i thought: great, you can build the maps image with the mediaoutput component. so i made a bean where i store all necessary information for building the image and navigating the map, and added a renderMap method.

      first thing i wanted to do was translating: click, hold down the mouse, go somewhere else on the image and release, send the coordinates to the bean, rerender the image.

      this(whats down in the code) may not be the best possible way to do things, but it seems to work.. well.. only halfway though.

      because... if i hold the mousebutton the component will be dragged around, end then i dont get any release event.

      so how can i stop the dragging?

      <ui:composition>
       <script language="JavaScript">
      function findXYstart(map, event){
       mapId = map.id;
      pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(mapId).offsetLeft;
      pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(mapId).offsetTop;
      setXYstart(pos_x,pos_y);
      }
      
      function findXYend(map, event){
       mapId = map.id;
      pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(mapId).offsetLeft;
      pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(mapId).offsetTop;
      setXYend(pos_x,pos_y);
      }
      </script>
       <h:outputText id="text" value="#{mapBean.XStart}"></h:outputText>
       <div id="div"><a4j:mediaOutput
       onmousedown="findXYstart(this, event);"
       onmouseup="findXYend(this, event);" id="map" element="img"
       mimeType="image/jpeg" createContent="#{mapBean.renderMap}"
       value="#{mapBean.XStart}">
       </a4j:mediaOutput></div>
       <a4j:form>
      
       <a4j:jsFunction name="setXYstart">
       <a4j:actionparam name="param1" assignTo="#{mapBean.XStart}" />
       <a4j:actionparam name="param2" assignTo="#{mapBean.YStart}" />
       </a4j:jsFunction>
       <a4j:jsFunction name="setXYend" reRender="text,map">
       <a4j:actionparam name="param1" assignTo="#{mapBean.XEnd}" />
       <a4j:actionparam name="param2" assignTo="#{mapBean.YEnd}" />
       </a4j:jsFunction>
       </a4j:form>
       </ui:composition>