vue-zn-drag

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

属性名	说明	类型	默认值
**title **	标题文字，在显示边框时有效	String
border	是否显示默认边框	Boolean	true
customClass	自定义区域class属性	String	无
multiple	多选模式，开启多选时按住Ctrl拖动鼠标多选或组件Mode为click 点击多选	Boolean	false
inArea	是否限制拖动组件在区域组件范围内拖动	Boolean	true
crossArea	区域内组件是否可跨越一个或多个边框，参数只能为[left,right,top,bottom]字符串,可以多个同时出现，冲突无效	Array
adsorbBorder（暂不可用）	是否吸附边框，仅在inArea参数为true时生效	Boolean	false
padding	显示边框时边框内边距，限制区域也将响应内边距参数	Number	0

Drag solt

名称	说明
title	边框显示时自定义左上角标题

Drag methods

方法名	说明	参数	返回值
updateDrag4Area	当拖动区域内组件变更时需要调用此方法更新组件边框信息，否则会出现新增拖动组件不受边框控制问题

注意：拖动区域内以及拖动组件不响应鼠标右键和鼠标中键事件，拖动区域绑定有自定义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

属性名	说明	类型	默认值
disabled	是否禁用组件拖动操作	Boolean	false
offset	鼠标或手指拖动偏移量，设置偏移量后鼠标或手指需移动指定偏移量后组件才会出现拖动效果	Number
fixed	当拖动组件松开鼠标后是否固定组件当前位置	Boolean	false
placeholder	组件拖动后默认会有组件的一份拷贝显示在原位呈半透明，禁用后原组件位置会被下一个组件挤占	Boolean	true
lockX	锁定组件横坐标，只能纵向移动	Boolean	false
lockY	锁定组件纵坐标，只能横向移动	Boolean	false
gridMove	组件移动方式变为已组件宽度和高度为单位移动	Boolean	false
gridY	组件以网格方式移动时设置上下网格大小，以像素为单位	Number
gridX	组件以网格方式移动时设置左右网格大小，以像素为单位	Number
index	组件承载数据下标，用于事件回调时作为参数	Number
value	组件承载数据对象，用于事件回调时作为参数	Object
mode	操作模式类型只能是[drag-拖动][click-点击]	String	drag
dragUid	自定义组件唯一字符串，此参数省略后将不能与外部组件或内部组件交互	String
externalInteractive	外部交互元素调用，参数详见下方代码]，在拖动到元素，拖出元素，在元素上放下时有效	Array
mouseInDrag	组件移动时相对鼠标位置，left top right bottom center 可多个方向，冲突不生效	String
mouseInDragOffset	组件移动时相对鼠标位置偏移量	Number	10
insertDirect	组件内部交互响应标识位置，left top right bottom all 可多个方向，冲突不生效	String

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

名称	说明
left	自定义拖动组件左侧插入标识
top	自定义拖动组件顶部插入标识
right	自定义拖动组件右侧插入标识
bottom	自定义拖动组件底部插入标识
lite	自定义拖动组件时的预览样式
only	自定义拖动组件可拖动区域

Drag event

事件名	说明	参数类型	参数说明
on-drag-down	当鼠标或者手指点击组件时触发	Object	[source] - 组件承载数据对象 , [sIndex] - 组件承载数据下标 , [event] - 组件触发事件封装对象
on-drag-move	当鼠标或者手指点击并拖动组件时触发	Object	[source] - 组件承载数据对象 , [sIndex] - 组件承载数据下标 , [target] - 组件悬浮到目标组件承载数据对象 , [tIndex] - 组件悬浮到目标组件承载数据下标 , [event] - 组件触发事件封装对象 , [elements] - 组件下方或上方所有包含当前坐标的DOM元素对象
on-drag-up	当鼠标或者手指拖动并抬起组件时触发	Object	[source] - 组件承载数据对象 [sIndex] - 组件承载数据下标 , [target] - 组件悬浮到目标组件承载数据对象 , [tIndex] - 组件悬浮到目标组件承载数据下标 , [event] - 组件触发事件封装对象
on-drag-reset	重置组件位置，当fixed为true时有效	Object	[source] - 组件承载数据对象 [sIndex] - 组件承载数据下标 , [event] - 组件触发事件封装对象

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