基于vue实现禅主页拖拽效果

效果图如下：

源地址

Bb两句话

最近在做一个基于vue的后台管理项目。平时项目进度的统计都是在上单路上进行的。所以~然后领导觉得拖拽效果还可以。可以添加到我们的项目中吗？既然领导已经说了，我们就继续吧。

所有技术：vue vuedraggable

拖拽的实现是基于vuedraggable的插件开发。

主页有两列流布局，每个组件可以上下拖动，也可以左右拖动。

基本步骤

布局

这种布局是最常见的两列布局，这里采用flex布局。左边是自适应，右边是固定宽度。布局容器{ display: flex。左{ flex : 1；右边距： 40px；} .右侧{ width: 550px}}拖放实现

这里使用了vuedraggable插件。它需要被引入组件。可拖动相当于拖动容器，这显然需要两个拖动容器。因此，在. left.right中添加两个拖动容器.默认情况下，您可以拖放到这里。插件的效果还是很强大的。

div class='布局-容器'！-left column-div class=' left '可拖动v-bind=' drag options ' class=' list-group ' : list=' item '//.拖动元素或组件/可拖动/div！-右列-div class=' right '可拖动v-bind=' drag options ' class=' list-group ' : list=' item '//.从“vue可拖动”中拖动元素或组件/可拖动/div script import可拖动；导出默认值{ components: { draggable }，computed : { drag options(){ return { animation : 30，handle : }。拖拽句柄'、group: 'description '、ghostClass: 'ghost '、chosenClass: 'sortable '、force fallback : true }；} }};/然而剧本还是和我想要的有点不一样。

向左和向右拖动，仅拖动标题栏

只有通过配置相关的配置项，这一块才能相对简单。要向左和向右拖动，需要为拖动容器分配相同的组属性。指定拖动标题元素需要将句柄配置为可拖动元素的选择器名称。

下面简要介绍常用的配置项：

Disabled :boolean定义此可排序对象是否可用。如果为真，则不能拖动可排序对象进行排序；如果为false，则可以排序，这相当于一个开关。组：用于设置可拖放的容器。如果两个容器的配置项相同，则可以互相拖动。动画：数字单位：ms，定义动画排序的时间；句柄：选择器格式是一串简单的css选择器，这样列表单元中符合选择器的元素就变成了拖动句柄。只有按住拖动手柄，才能拖动列表单元；filter :selector的格式是一串简单的css选择器，它定义了哪些列表单元不能拖放。可以设置为多个选择器，用“，”隔开；可拖动：选择器格式是一串简单的css选择器，它定义了哪些列表单元可以被拖放。ghostclass:选择器格式是一串简单的css选择器。拖动列表单元时，将生成一个副本作为阴影单元，以模拟被拖动单元的排序。这个配置项就是给这个阴影单元添加一个类，我们可以这样编辑阴影元素的样式。ChosenClass:选择器格式是一串简单的css选择器，和一个类；将被添加到列表单元中；ForceFallback :boolean设置为true，将不使用原生html5拖放，可以修改拖放中某些元素的样式。FallbackClass :string当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；相关配置如下：

computed : { DragOptions(){ return { animation : 30，handle: '。拖拽句柄'、group: 'description '、ghostClass: 'ghost '、chosenClass: 'sortable '、force fallback : true }；}}拖动时的样式调整

拖的时候需要做三件事。拖动时，拖动元素只显示标题栏，两列列表只显示标题元素，要移动的位置灰显。

1.拖动元素仅显示标题栏：默认情况下，html5元素的拖动效果将打开。这里显然不需要。如果forceFallback更改为false，则可以关闭html5的默认效果。顺便说一句，通过chosenClass:“可排序”修改拖动元素类名。用css直接隐藏。可排序的{。组件框{ display: none高度： 0；}}2.两列的列表只显示了标题元素，这是我借助两个事件实现的。

OnStart:拖动列表单元后的函数回调函数onEnd:拖动列表单元后的函数回调函数div class=' layout-container ' : class=' { drag : drag } '//./div data(){ return { draging 3360 false }；}，methods : { OnStart(){ this . draging=true；}，OnEnD(){ this . draging=false；} }.拖动{。组件框{ display: none}}添加的类名。拖到。布局-拖动开始时的容器。拖动结束时，删除类名。

要移动的位置呈灰色

这里需要使用上面的ghost class :“ghost”配置项。并添加相应的css。幽灵{。拖动手柄{ background: rgb(129，168，187)；}}嗯，基本实现了。

显示动态组件

下一步是数据的动态显示。这里需要vue中的动态组件。附上正式文件链接，点击查看。

然后将每个拖动元素的内容写成一个组件，可以用动态组件自由拖动。

//从“@/components/dragcomponents”将使用的组件引入import {timeline、calendar、welcome、carousel、imgs、konlist }；组件： {可拖动、时间线、日历、欢迎、转盘、imgs、konlist}与v-for合作循环数据，然后动态显示数据。

Component:是='元素。name '/这段代码与数据格式有关，所以可以直接看文本的结尾。我不会从这里开始。

数据保持

拖动后，我们需要在前端缓存拖动顺序，在下一个条目后，我们可以继续使用拖动的数据。

//获取新布局get layout(){ let mylayout=JSON . parse(window . local storage . getitem(' kon '))；if(！myLayout | | object . key(myLayout)。长度===0)myLayout=this . layout；const NewLayout={ }；for(myLayout中的const side){ new layout[side]=myLayout[side]。map(I={ return this.component list . find(c=c . id===I)；});} this.mainData=newLayout}，//设置新布局setLayout(){ const RES={ }；for(const side in this . main data){ const item=this . main data[side]。map(I=I . id)；RES[side]=item；} window . local storage . setitem(' kon '，JSON . stringify(RES))；}所以我只需要安装新的布局。

mounted(){ this . GetLayout()；}拖动后，设置新布局

onEnd(){ this . draging=false；this . setlayout()；}项目中建议与后端协同存储用户布局的数据。每次拖动后，新的布局数据请求界面将保存在数据库中，并存储在缓存中。再次进入页面时，读取缓存中的数据，如果没有，请求后端的接口获取用户的布局，然后再次存储到缓存中。如果是，直接读取缓存中的数据。

说最后几句话

其实以上效果并不是特别难。可以简单的花点时间看看相关的文件就可以做出来，并记录在掘金队。我只想和你分享我的想法。同时也希望和大家交流，共同进步。

生活不容易，大家加油

附上源代码：项目地址

template div : class=' { drag : draing } ' div class=' layout-container ' div : class=' key ' v-for='(item，key)in mainData ' : key=' key ' drag able v-bind=' drag options ' class=' list-group ' : list=' item ' @ end=' onEnd ' @ start=' onStart ' transition-group name=' list ' div class=' list-group-item ' v-for从" @/components/DragComponents "导入{时间轴、日历、欢迎、轮播、imgs、KonList }；导出默认{组件： {可拖动，时间线，日历，欢迎，转盘，imgs，KonList }，数据(){返回{拖动：假，组件列表： [ { name: 'KonList '，title: '追番地址，id: '5' }，{ name: 'imgs '，title: '五月最强新番，id: '4' }，name: '时间轴，标题： '日程组件，id: '2' }，{ name: 'carousel '，title: '走马灯组件，id: '1' }，name: '日历，标题： '日历组件，id: '3' } ]，layout: { left: ['5 '，' 4']，right: ['2 '，' 1 '，' 3'] }，main data : { }；}，计算： { DragOptions(){ return { animation : 30，handle: ' .拖拽句柄、group: 'description '、ghostClass: 'ghost '、chosenClass: 'sortable '、force back : true }；} },挂载(){这个。GetLayout()；}，方法： { OnStart(){ this。draging=true}，OnEnD(){ this。draging=false这个。setlayout()；}，GetLayout(){ 0让myLayout=JSON。解析(窗口。本地存储。getitem(' kon ')；if(！myLayout | |对象。钥匙(myLayout).长度===0)myLayout=这个。布局；const NewLayout={ }；用于(myLayout中的常量侧){新布局[侧]=myLayout[侧].map(I={返回此。组件列表。find(c=c . id===I)；});} this.mainData=newLayout}，SetLayout(){ const RES={ }；在这方面。主数据){ const item=this。主要数据.地图(I=I . id)；RES[边]=项目；}窗口。本地存储。setitem(' kon '，JSON。stringify(RES))；} }};/script style lang=' SCS '作用域。布局-容器{高度： 100%；display: flex .左{ flex : 1；右边距： 40px} .右侧{宽度： 550px}。列表-组-项目{页边距-底部： 20px边界半径： 6px飞越：隐藏；背景# fff}。组件盒{ padding: 20px }。拖动手柄cursor:移动；高度： 40px线高： 40pxcolor : # fff font-weight : 700；font-size : 16pxpadding: 0 20px背景技术# 6cf}}。拖动{。组件框{ display:无}}。列表-输入-活动{ transit : all。3s线性；}.列表-输入，列表-离开-前往{ opa city 3360。5;}.可排序的{。组件框{ display:无高度： 0;}}.列表组{ span { display:块；最小高度： 20px}}.幽灵{。拖动手柄{ background: rgb(129，168，187)；} }/样式总结

以上所述是小编给大家介绍的基于某视频剪辑软件实现一个禅道主页拖拽效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！