# # @draggable

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

## # 示例

### # 可拖拽对话框

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

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }

### # 可拖拽对话框头部

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

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }

### # 不可拖拽区域

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

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

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }