福昕开发者文档中心

@draggable ​

可拖拽指令实现了一个通用的拖放函数，这个函数通常在对话框组件中使用。

示例 ​

可拖拽对话框 ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer2" class="center my-layer" @draggable visible>
                    <layer-header title="Click anywhere on the box to drag" icon-class="fv__icon-toolbar-print"></layer-header>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>
json
{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

可拖拽对话框头部 ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer1" class="center my-layer" visible>
                    <layer-header @draggable="{type:'parent'}" title="Click header area to drag" icon-class="fv__icon-toolbar-print"></layer-header>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>
json
{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

不可拖拽区域 ​

一些情况下，可拖拽对话框可能包含具有自身拖拽功能 (例如, slider) 的组件。此时，如果拖拽函数没有停止将事件传递到应用层，则整个交互将受到影响。若要解决此问题，可以用 @stop-drag 标记组件以阻止内部组件拖拽功能。下面是代码示例：

html

<html>
<template id="layout-template">
    <webpdf>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
        <template>
            <layer name="my-layer1" class="center my-layer" @draggable visible>
                <layer-header title="Drag everywhere" icon-class="fv__icon-toolbar-print"></layer-header>
                <div>
                    <label>
                        without @stop-drag:
                        <input type="range" min="0" max="100" step="0.1">
                    </label>
                    <label>
                        marked with @stop-drag:
                        <input @stop-drag type="range" min="0" max="100" step="0.1">
                    </label>
                </div>
            </layer>
        </template>
    </webpdf>
</template>
</html>
<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }

    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
    "iframeOptions": {
        "style": "height: 500px"
    }
}