vue-zn-drag v1.2.22-unstabled

@(liubo934006704 的笔记本)拖动, drag,使用

DragArea ( 拖放区域组件 )

简介

基于Vue开发的拖放组件可配合拖放区域组件实现区域限制、边框、跨边框拖放等功能。

预览地址

http://zain.site/drag/index.html

基本用法

配置参数使用默认配置基础写法，配合拖动组件组合用法

代码示例

<zn-drag-area :padding="0" ref="drag" title="拖放区域" :in-area="true" :adsorb-border="true">
    <ul>
        <li v-for="(item,index) in data">
            <zn-drag :key="index" :index="index" :value="item" :drag-uid="`${index}`"
                     :external-interactive="array" @on-drag-up="up">
                <p class="example">
                    <span>Id: {{item.id}}</span>
                    <span>Name: {{item.name}}</span>
                    <span>Sort: {{item.sort}}</span>
                </p>
            </zn-drag>
        </li>
    </ul>
</zn-drag-area>

API

Drag props

Drag solt

Drag methods

注意：拖动区域内以及拖动组件不响应鼠标右键和鼠标中键事件，拖动区域绑定有自定义Resize事件，不可取消

Drag ( 拖放组件 )

简介

Vue自定义拖放组件，实现页面组件全页面或限制区域内自由移动，目前兼容部分移动端操作。

基本用法

配置参数使用默认配置基础写法

代码示例

<ul>
    <li v-for="(item,index) in data">
        <zn-drag :key="index" :index="index" :value="item" :drag-uid="`${index}`">
            <p class="example">
                <span>Id: {{item.id}}</span>
                <span>Name: {{item.name}}</span>
                <span>Sort: {{item.sort}}</span>
            </p>
        </zn-drag>
    </li>
</ul>

API

Drag props

externalInteractive 参数

[{
    key: 'id', // DOM组件属性名
    value: 'test-btn', // DOM组件属性值
    in: function (event, el, data, index) { // 鼠标拖动到元素时调用
    },
    out: function (event, el, data, index) { // 鼠标拖出到元素时调用
    },
    end: function (event, el, data, index) { // 鼠标放下组件到元素时调用
    }
}]

Drag solt

Drag event

注意: 组件已绑定鼠标操作等事件，如需事件操作请在组件内部绑定处理。