javascript - 拖放 modalPanel 的内部-6ren

javascript - 拖放 modalPanel 的内部

转载作者：行者123 更新时间：2023-11-29 20:23:42

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

我希望图像可以缩放(因此需要 enlarge() 和 decrease() 函数)并且可以拖动。此代码部分工作。如果您在缩放之前免打扰，它可以正常工作，但之后它会停止工作。顺便说一句，我看不到拖动的预览。我想实现与 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>

关于javascript - 拖放 modalPanel 的内部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2424159/

文章推荐： php - Prestashop 属性变更 - 相关属性显示

文章推荐： android - Ant，错误膨胀类android.support.v7.widget.RecyclerView

文章推荐： android - 回合制多人游戏的 API

文章推荐： c# - Xamarin : Get data from ArrayAdapter after rotating screen

jsf - modalPanel 显示时延迟渲染
动机:我想在访问时减小页面的大小，所以我认为 modalPanels 上的延迟渲染会有所帮助。这个想法是在用户单击显示它的链接时呈现 modalPanel。我想在 rich:modalPanel 上
java - RichFaces:使用两个 modalPanel
我的 rich:modalPanel 遇到问题。我有一个由 rich:menuItem 显示的 modalPanel。在此modalPanel中有一个rich:fileUpload，在执行fi
javascript - 拖放 modalPanel 的内部
使用 Richfaces 3.3.0GA、jsf 1.2_14 和 facelets。我有一个 richfaces ModalPanel，里面有一个图像，如下所示:
java - Richfaces modalPanel 滚动
我正在使用 Richfaces 3.3。我打开模式面板(里面有可滚动数据表)。当我向上/向下滚动时，我希望模式面板中的可滚动数据表将滚动。但父窗口会滚动。我该如何修复它？最佳答案 .rich-mp
java - 打印 ? 的内容
尝试打印的内容在我的应用程序中，打印页面上一片困惑。完整的 HTML 底层出现在打印页面上，但完全淡出(就像它出现在屏幕上一样)。该页面上的某处是内容本身 - 用户实际想要打印的内容。预期
java - 创建 dynamically
如何动态创建一个rich:modalPanel？我需要单击一个按钮并生成一个 float 面板。问题是，如果我单击按钮，应该会创建第二个面板，而第一个面板应该保留在原处。我试过使用 ui:repeat
javascript - 在rich :modalPanel via js中设置top和left属性
我使用 RichFaces 的 rich:modalPanel 并尝试设置 top 和 left 属性(定义窗口出现的位置)在屏幕上)通过 JavaScript。我试图获取另一个元素的偏移量并使窗口显
java - 是否可以有一个带有验证的表单并使用丰富的:modalPanel for data entry too?
Richfaces 3.3.3、Jsf 1.2: 我有一个 a4j:form，它使用一些简单的验证，主要是 required="true" 以确保在没有一些必要数据的情况下不会提交表单。我还有一些复
jsf - 如何隐藏富人 :modalPanel on Ajax response in JSF
我在一个应用程序中使用 jsf 覆盖面。我正在使用 rich:modalPanel 弹出窗口读取一些详细信息并在服务器响应后使用 a4j 命令按钮提交面板我想隐藏 modalPanel 但不知道如何，
java - modalPanel 内的 inputTextarea 不更新支持 bean
我在 modalPanel 中有这个 inputTextarea，更新支持 bean 中相应值 (motivePopupMotive) 的唯一方法是在 inputTextarea 中添加 a4j:su
java - jboss-seam-pdf里面丰富:modalPanel cannot work
我有一个 modalPanel 声明为 value="/view/printForm/order.xhtml" />
css - 为什么丰富 :modalPanel styleclass styles not being applied to it?
我有一个 rich:modalPanel ，我从外部 css 设置样式，但问题是 styleClass 属性没有将我的样式应用到我的 rich:modalPanel。我试图将输入文本元素放入其中，然后
java - 使用 Ajax 加载 Richfaces modalPanel
我在我的项目中使用了 richfaces，特别是 rich:modalPanel 标签，它允许在页面中显示弹出窗口。因此，为了做到这一点，我像这样包含了我的弹出窗口: 此弹出窗口包含以下代码:
jsf - 如何制作a4j :commandLink execute action and show modalpanel?
Jsf 1.2，Richfaces 3.3.3，我得到以下代码来显示 richfaces:modalpanel: 它可以工作并显示模态面板
java - 调用富:modalPanel for every ajax request with out using a4j:status?
我正在使用 JSF richfaces 开发 Web 应用程序。我在主模板中有一个 rich:modalpanel。此 modalPanel 有“您的请求正在处理......”消息。我想在每个操作(
java - :inputText value inside rich:modalPanel not binding to backing bean
当我单击“保存”按钮时，会调用“addCompany”操作，但是当我调试并在支持 bean 中看到实例变量 companyName 的值时，它显示为 null。我想我犯了一些真正愚蠢的错误。模态 X

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 拖放 modalPanel 的内部