@(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] - 组件触发事件封装对象|

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