Foxit Developer

@draggable ​

The draggable directive provides generic drag behavior, commonly used on dialog components.

Examples ​

Draggable dialog ​

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

Draggable dialog header ​

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

Non-draggable regions ​

A draggable dialog may contain controls with their own drag behavior (for example, a slider). Without stopping propagation, dragging the dialog can break those controls. Mark inner elements with @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"
    }
}