前言
公司项目需要做拖拽替换效果,本人用的vue框架。在网上找了很多资料都是用的 Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果,我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。
JQ有实现拖拽的插件,我下载过一个插件并看过源码,大致原理是给目标元素设置定位属性,通过监听鼠标mousedown,mouseup事件,再计算鼠标位置变化,然后给元素样式设置偏移值来实现拖拽效果的。
H5提供了专门的拖拽API 给元素添加 draggable 属性,设置为 true就能实现拖拽了。本文使用的H5提供的拖拽API 以及vue 无其他任何添加,请放心使用
直接上代码
<template>
<div class="container">
<div class="layout">
<button
class="layout-btn"
@click="layoutType=val.value"
v-for="val in layoutOptions"
:key="val.value"
>{
{val.label}}</button>
</div>
<div
class="group"
:class="{'left-top-container': gindex===0,
'right-top-container': gindex===1,
'bottom-container': gindex===2,
'top-container': gindex<2}"
v-for="(group,gindex) in data"
:key="gindex"
>
<div
class="cls-default"
v-for="(item,cindex) in group.children"
:key="cindex"
:data-id="gindex+'-'+cindex"
draggable="true"
@dragstart="onDragstart($event)"